ZeroTool Workbench
SVG → JSX コンバーター
SVGをReact JSXコンポーネントにブラウザ上で即座に変換。キャメルケース属性・className・TypeScript・forwardRef・memoラップに対応。無料・登録不要。
使い方
- 左のテキストエリアにSVGコードを貼り付けます。
- コンポーネント名を入力します（デフォルト：
MyIcon）。先頭文字は自動で大文字になります。 - TypeScript・forwardRef・memoオプションを必要に応じて切り替えます。
- JSXコンポーネントが右のテキストエリアに即座に表示されます。
- コピーボタンでクリップボードにコピーします。
属性変換ルール
| SVG | JSX |
|---|---|
stroke-width | strokeWidth |
stroke-linecap | strokeLinecap |
fill-rule | fillRule |
clip-path | clipPath |
class | className |
font-size | fontSize |
text-anchor | textAnchor |
xmlns="..." | (削除) |
出力モード
- デフォルト：TypeScript注釈なしのプレーンな関数コンポーネント。
- TypeScript：
React.FC<React.SVGProps<SVGSVGElement>>型を付与。className・style・onClickなどが型安全に使えます。 - forwardRef：
React.forwardRefでラップし、親コンポーネントにSVG要素のrefを公開します。 - memo：最終エクスポートを
React.memoでラップし、不要な再レンダリングをスキップします。
主な用途
- FigmaやIllustratorからエクスポートしたSVGをReactアイコンコンポーネントに変換
- SVGアイコンライブラリをJSXベースのデザインシステムに移行
- SVGアイコンにclassName・styleなどのReact propsを受け取れるようにする
- propsスプレッドでaria-labelを受け取るアクセシブルなアイコンコンポーネントの構築
FAQ
SVG to JSXコンバーターとは何ですか？
生のSVGファイルを再利用可能なReactコンポーネントに変換します。主な変換内容：ハイフン属性をキャメルケースに変換（stroke-width → strokeWidth）、classをclassNameに変更、xmlns宣言を削除、SVGマークアップを関数コンポーネントで包みます。
なぜSVG属性を変換するのですか？
JSXはJavaScriptにコンパイルされるため、ハイフン付きプロパティ名は有効なJS識別子ではありません。ReactではstrokeWidth・fillRule・clipPathなどのキャメルケース形式が必要です。
TypeScriptオプションは何をしますか？
有効にすると、React.FC<React.SVGProps<SVGSVGElement>>型が付与され、className・style・onClickなどSVG属性の型補完が得られます。
forwardRefは何に使いますか？
forwardRefにより、親コンポーネントがSVG要素にrefを渡せます。DOMノードへのプログラム的アクセス（サイズ計測・アニメーション等）が必要な場合に便利です。
memoラップの効果は？
React.memoでコンポーネントを包むと、propsが変化した場合のみ再レンダリングされます。アイコンコンポーネントのパフォーマンス最適化に有効です。
データはサーバーに送信されますか？
いいえ。変換はすべてブラウザのJavaScriptで完結します。SVGデータは送信されません。