SVGアイコンのSvelteコンポーネントファイルを作成しています。
私のディレクトリには多くのSVGファイルがあります。
ab-testing.svg
abacus.svg
abjad-arabic.svg
abjad-hebrew.svg
abugida-devanagari.svg
abugida-thai.svg
access-point-check.svg
access-point-minus.svg
...
各ファイルに文字列を挿入したい。
たとえば、ファイルを使用すると、次のようになりますaccess-point-minus.svg
。
次の特徴があります。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="mdi-access-point-minus"
width="24"
height="24"
viewBox="0 0 24 24">
<path d="M16 12C16 # removed for brevity ........" /></svg>
内容を次のように変更したいと思います。
<script>
export let size = '24';
export let color = 'currentColor';
export let ariaLabel = 'access point minus'
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="mdi-access-point-minus"
aria-label={ariaLabel}
width={size}
height={size}
fill={color}
class={$$props.class}
{...$$props}
viewBox="0 0 24 24"
><path # removed for brevity ...
</svg>
ファイル名access-point-minus.svg
をAccessPointMinus.svelte
。
ディレクトリ内のすべてのファイルに対して同じ操作を繰り返したいと思います。