SVG → Vue
どんな SVG も .vue 単一ファイルコンポーネントに — あるいはテンプレートブロックだけを取り出して、既存のコンポーネントに貼り付けられます。
またはクリックして選択 — SVG のみ
コンポーネント名はファイル名から作られます。script ブロックは名前を付けているだけなので、不要なら削除してかまいません。
マークアップだけ。すでにあるコンポーネントの中に貼り付ける用です。元の SVG にインラインの style 要素があった場合、その CSS は上のファイルの style ブロックにあり、ここには含まれません。
改名は不要
Vue のテンプレートは HTML として解析されるため、SVG は書かれたままの形で入れられます。stroke-width は stroke-width のまま、class は class のまま、インラインの style 属性もそのまま効きます。変換はほぼファイルを包むだけの作業で、出力が入力とほとんど同じに見えるのはそのためです。
あとは属性のフォールスルーが引き受けます。ルート要素が 1 つなら、コンポーネントに付けた属性はそのまま svg タグに渡るので、width も class もクリックハンドラーも、prop を 1 つも宣言せずに動きます。
3 ステップ
.svg ファイルを選びます。ファイルは端末内に留まります。
.vue ファイル全体、またはテンプレートだけ。
ほかのコンポーネントと同じように import し、大きさは外側から指定します。
かんたん回答
必要ないからです。ルートが 1 つのコンポーネントは、渡された属性をそのまま svg タグに引き渡すので、width・height・class・イベントリスナーはすでに動きます。props を宣言するのは、その値から何かを計算したいときだけで十分です。
コンポーネントに名前を付けるためだけです。この名前は Vue devtools や警告メッセージに表示されます。なくても描画結果は同じなので、削除してもまったく問題ありません。
コンポーネント下部の scoped style ブロックに移動しています。Vue はテンプレート内の style タグと script タグを破棄するため、インラインのスタイルシートをほぼ必ず含む Illustrator や Figma 書き出しの SVG は、そのままだと色がすべて失われた状態で描画されてしまいます。CSS を外に出すことで動作を保ち、scoped によってアプリの他の部分に漏れることもありません。
直書きの fill や stroke を currentColor に置き換え、親要素の CSS で色を指定します。変換前に SVG カラーチェンジャーを使えば、ファイル内のすべての色を currentColor にまとめて変えられます。
この出力に関しては必要です。script setup と defineOptions は Vue 3 の機能だからです。Vue 2 でもテンプレートブロックはそのまま使えます。通常の Options API コンポーネントの template に貼り付けてください。
いいえ。変換はブラウザ内での単なる文字列処理です。