本文へスキップ
SvgJsx
言語: 日本語

SVG を JSX・React コンポーネントに変換

SVG コードを貼り付けるか .svg ファイルをドロップするだけで、React、TypeScript、React Native、Vue、Solid 向けのすぐにコミットできるきれいなコンポーネントが手に入ります。処理はすべてブラウザ内で完結します。

クイックプリセット:
.svg ファイルをここにドロップ、またはファイルは FileReader でローカルに読み込まれ、アップロードされることはありません。
オプション
エクスポート:
const HeartIcon = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

プレビュー

変換後の SVG のプレビュー
元の SVG
706B
最適化後の SVG
538B(-24%)
コンポーネント
566B

この SVG 変換ツールでできること

Figma、Illustrator、Sketch、Inkscape から書き出した SVG は正しい XML ですが、正しい JSX ではありません。React では stroke-width ではなく strokeWidth のようなキャメルケースの props、class ではなく className、CSS 文字列ではなくスタイルオブジェクトが必要です。さらにデザインツールは XML 宣言、コメント、メタデータ、名前空間付きの属性を書き出すため、バンドルが膨らみ警告の原因になります。

SvgJsx は小さな XML パーサーで SVG を解析し、各属性をフレームワークが期待する形に書き換えて、整形済みのコンポーネントを出力します。TypeScript の型、size プロパティ、currentColor による塗り、forwardRef、memo、エクスポート形式を選んで、コードをコピーするかファイルとしてダウンロードできます。

SVG を React コンポーネントに変換する手順

数秒で完了します。

  • 入力欄に SVG コードを貼り付けるか、1 つ以上の .svg ファイルをドロップします。
  • 出力形式を選びます：React、React Native、Vue、Solid、または JSX スニペットのみ。
  • コンポーネント名と、TypeScript・currentColor・size プロパティなどのオプションを設定します。
  • ライブプレビューとサイズ比較を確認し、コードをコピーするかファイルをダウンロードします。複数ファイルは ZIP にまとめられます。

自動で行われる変換

ハイフン付きの属性はキャメルケースに（stroke-linecap → strokeLinecap）、名前空間付きの属性はフラットに（xlink:href → xlinkHref）、インラインの style 文字列は JavaScript オブジェクトに変換されます。data-* と aria-* 属性は React がそのまま受け付けるため変更しません。script 要素とインラインのイベントハンドラは削除されるので、貼り付けたファイルからアプリにコードが紛れ込むことはありません。

軽量な最適化として空白を圧縮し、座標を指定した小数点以下の桁数に丸めることもできます。多くのアイコンセットでは、重い SVGO に頼らずマークアップを 20〜40% 削減できます。

よくある質問

この SVG→JSX 変換ツールは無料ですか？

はい、完全に無料です。アカウント登録も利用回数の制限もありません。静的サイトなので、利用者に転嫁すべきサーバー費用も発生しません。

SVG ファイルはどこかにアップロードされますか？

いいえ。ファイルはブラウザの FileReader API で読み込まれ、端末上の JavaScript で変換されます。サーバーには何も送信されないため、社外秘のロゴやアイコンにも安心して使えます。

SVG と JSX の違いは何ですか？

SVG は XML のマークアップで、JSX は JavaScript の構文拡張です。JSX ではキャメルケースの属性名、class の代わりの className、文字列ではなくオブジェクトの style、特殊文字を囲む波括弧が必要なため、生の SVG はそのままではコンパイルできないことがよくあります。

Figma や Illustrator から書き出したファイルにも使えますか？

はい。エディタ固有のメタデータ、コメント、sodipodi・inkscape 属性、XML 宣言はデフォルトで削除されます。参照されている id は保持されるため、グラデーション、マスク、クリップパスも正しく動作します。

多数の SVG アイコンを一度に変換できますか？

できます。複数の .svg ファイルをドロップすると、それぞれがファイル名に基づくコンポーネントになります。すべてのアイコンを再エクスポートする index ファイル付きの ZIP でまとめてダウンロードできます。