SVG → JSX 変換ツール

SVG → JSX 変換ツールとは？

SVG → JSX 変換ツールは、通常の SVG マークアップを、そのままコンポーネントに貼り付けられる有効な React JSX に変換する無料のブラウザ内ツールです。React は DOM 属性を camelCase（strokeWidth、clipPath、fillRule）で求め、class の代わりに className を使うため、手で貼り付けた SVG はクリーンアップするまで警告が出がちですが、本ツールはそれを自動で行います。フロントエンド開発者やデザイナーは、Figma・Illustrator・アイコンセットからアイコンを書き出して再利用可能な React コンポーネントにするときに使います。「コンポーネントで包む」をオンにすると名前付きの関数コンポーネントを生成し、「TypeScript の props」をオンにすると React.SVGProps で型を付け、width・height・className・イベントハンドラーを転送します。

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

1. 上部の「SVG 入力」欄に SVG マークアップを貼り付けるか入力します。
2. 下の出力欄で変換後の JSX を確認します。属性は camelCase に、class は className になり、空タグは自動で自己終了します。
3. 「設定」を開いて「コンポーネントで包む」をオンにすると、裸の JSX ではなく再利用可能な React 関数コンポーネントを生成します。
4. 「コンポーネント名」フィールドで、包むときに使う名前（例：MyIcon）を指定します。
5. 「TypeScript の props」を有効にすると、型付きの React.SVGProps を展開し、width や className などの props を受け取れるようにします。
6. 「コピー」をクリックして JSX をコピーし、React や Next.js のプロジェクトに貼り付けます。

使用例

<svg viewBox="0 0 24 24"><path stroke-width="2" class="icon" d="M4 12h16"></path></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" className="icon" d="M4 12h16" /></svg>

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

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

よくある質問

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

ハイフン付きや名前空間付きの属性を React の camelCase 形式に変換し（stroke-width → strokeWidth、fill-rule → fillRule、xlink:href → xlinkHref）、class 属性を className に変え、path や rect などの空要素を自己終了して有効な JSX にします。

コンポーネントと TypeScript のオプションはどう動きますか？

「コンポーネントで包む」をオフにすると、どこにでも置けるインライン JSX が得られます。オンにすると、入力したコンポーネント名で SVG を名前付き関数コンポーネントに包みます。「TypeScript の props」を有効にすると、そのコンポーネントに React.SVGProps で型を付け、{...props} を展開して width・height・className・イベントハンドラーを転送します。

インラインスタイルは扱えますか？

通常の属性は変換されますが、文字列の style 属性は JSX の style オブジェクトには書き換えられません。React は style を camelCase のプロパティから成るオブジェクトとして期待するため、貼り付け後にインライン style を確認してください。本ツールは属性名・自己終了・任意のコンポーネントラップに重点を置いています。

SVG が無効な場合はどうなりますか？

入力を SVG または XML として解析できない場合は、出力の代わりにエラーメッセージが表示されます。マークアップにルート要素が 1 つだけあり、タグが対になっていることを確認すると、入力に応じて JSX が再び表示されます。

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

いいえ。変換は完全にブラウザ内で動く純粋な文字列処理なので、あなたの SVG マークアップがサーバーに送られることはなく、オフラインでも動作します。