SVG Forge

SVG を Vue コンポーネントに

どんな SVG も Vue 3 の単一ファイルコンポーネントに。

またはファイルをドロップ / 下にコードを貼り付け

出力は Vue 3 の script-setup SFC です。属性はルートの SVG にパススルーされます。

Vue 3 SFC
出力はここに表示されます

使い方

  1. 1SVG コードを貼り付けるか、.svg ファイルをドロップします。
  2. 2属性のパススルー付きの Vue 3 SFC としてラップされます。
  3. 3.vue ファイルの中身をプロジェクトにコピーします。

無料・登録不要・透かしなし —— すべてブラウザー内でローカルに動作するため、ファイルが端末を離れることはありません。

よくある質問

Vue 2 と Vue 3 のどちら向けですか？

出力は Vue 3 の script-setup SFC を対象にしていますが、Vue 2.7 のプロジェクトでも動作します。

関連ツール

SVG を React に

SVG を貼るだけで、そのまま import できる JSX / TSX コンポーネントに。

SVG 最適化ツール

SVGO によるクリーンアップ：ファイルは小さく、見た目はそのまま。削減量はその場で確認できます。

SVG を CSS に

どんな SVG も、エンコードした data URI としてスタイルシートに埋め込めます。