SVG → JSX 変換ツール

SVG → JSX 変換ツールとは？

SVG → JSX 変換ツールは、通常の SVG マークアップを、そのままコンポーネントに貼り付けられる有効な React JSX に変換する無料のブラウザ内ツールです。React は DOM 属性を camelCase（strokeWidth、clipPath、fillRule）で求め、class の代わりに className を使い、style 属性を文字列ではなく camelCase プロパティのオブジェクトとして要求しますが、本ツールはそれらをすべて自動で修正します。フロントエンド開発者やデザイナーは、Figma・Illustrator・アイコンセットからアイコンを書き出すときに使います。任意の整理をオンにするとコメント・編集ソフトのメタデータ・XML 宣言を取り除け、出力をインライン JSX にするか、React.SVGProps で型を付けた関数・memo()・forwardRef コンポーネントにするかを選べます。

SVG → JSX 変換ツールの使い方

1. SVG マークアップを入力欄に貼り付けるか、.svg ファイルをドロップ領域にドロップします。
2. 下の出力欄で変換後の JSX を確認します。属性は camelCase に、class は className に、インライン style は style オブジェクトになり、空タグは自動で自己終了します。
3. 「設定」を開いて「コンポーネント出力」を選びます：インライン JSX、関数コンポーネント、memo() コンポーネント、forwardRef コンポーネント。
4. 「コンポーネント名」フィールドで、包むときに使う名前（例：MyIcon）を指定します。
5. 「TypeScript の props」を有効にすると React.SVGProps で型が付き、「SVG を整理」をオンにすると先にコメントや編集ソフトのメタデータを取り除けます。
6. 「コピー」をクリックして JSX をコピーし、React や Next.js のプロジェクトに貼り付けます。

使用例

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

よくある質問

変換ツールは SVG の何を変更しますか？

ハイフン付きや名前空間付きの属性を React の camelCase 形式に変換し（stroke-width → strokeWidth、xlink:href → xlinkHref）、class を className に変え、インライン style 文字列をキーが camelCase の JSX style オブジェクトに書き換え、path や rect などの空要素を自己終了して有効な JSX にします。

コンポーネント出力の選択肢はどう動きますか？

インライン JSX を選べばマークアップをどこにでも置け、入力したコンポーネント名で関数・memo()・forwardRef コンポーネントとして包むこともできます。forwardRef コンポーネントは ref を受け取り、ルートの svg に取り付けられます。「TypeScript の props」を有効にすると、どのラッパーも React.SVGProps で型付けされ {...props} が展開されます。

インラインスタイルも変換しますか？

はい。style="fill:red;stroke-width:2" のような属性は style={{ fill: "red", strokeWidth: "2" }} のような JSX style オブジェクトに書き換えられ、プロパティ名は camelCase に、値は文字列のまま保たれます。CSS カスタムプロパティ（--var）は文字列キーとして保持されます。

SVGO 風の整理は何をしますか？

「SVG を整理」をオンにすると、XML 宣言・DOCTYPE・コメント・<metadata>・inkscape: や sodipodi: などの編集ソフト名前空間・svg の version 属性を取り除き、空白を詰めます — すべて JSX 変換の前に行われます。

私の SVG はどこかにアップロードされますか？

いいえ。ファイルのドロップも貼り付けも完全にブラウザ内で動く純粋な文字列処理なので、あなたの SVG がサーバーに送られることはなく、オフラインでも動作します。