⚛️ SVG to React JSX 変換ツール

SVGマークアップを貼り付けると、Reactコンポーネントにそのまま使えるJSXに変換します。属性をcamelCaseにし(class→className)、style文字列をオブジェクトに変換し、コメントとDOCTYPEを除去します。

SVG 入力

React JSX 出力

他の開発者ツール

🎨 LESS to CSS コンパイラ 🖼️ Base64画像変換 🔠 ケース変換器

ガイド

詳しく見る

1. なぜSVGをJSXに変換するのか

React(JSX)はHTML/SVGと文法が少し異なります。ハイフンを含む属性(stroke-width)はcamelCase(strokeWidth)に、classはclassNameにする必要があり、styleは文字列ではなくJavaScriptオブジェクトである必要があります。このツールはそうした違いを自動変換し、デザイナーが書き出したSVGアイコンをそのままReactコンポーネントに貼り付けられるようにします。

2. 変換ルール

class→className、for→htmlForにマッピングし、stroke-widthやfill-opacityのようなハイフン属性をcamelCaseにします。xlink:hrefのような名前空間付き属性はxlinkHrefに変換し、data-・aria-属性はそのまま残します。style="fill:red;stroke-linecap:round"はstyle={{ fill: 'red', strokeLinecap: 'round' }}オブジェクトに変換し、コメント・DOCTYPE・XML宣言は除去します。

3. DOMParserによる安全な変換

このツールは正規表現ではなくブラウザのDOMParserでSVGを実際に解析してから再直列化するため、ネスト構造や属性を正確に扱います。すべての処理はブラウザ内だけで行われ、コードはサーバーに送信されません。変換結果をコンポーネントに入れた後は、width/heightをpropsに切り出したりfillを"currentColor"にするなど、必要に応じて調整してください。

よくある質問

変換結果をそのままReactで使えますか?

はい。出力されたJSXをコンポーネントのreturn内に貼り付けてください。必要ならサイズや色をpropsにすると再利用性が高まります。

style文字列も変換されますか?

はい。style="a:b;c:d"のような文字列をstyle={{ a: 'b', c: 'd' }}形式のオブジェクトに変換し、CSSプロパティ名をcamelCaseにします。

入力したSVGはサーバーに送信されますか?

いいえ。変換はブラウザ内だけで行われ、コードはサーバーに送信されません。

svgrのようなライブラリを使いますか?

いいえ。外部ライブラリなしでブラウザ内蔵のDOMParserで直接実装しています。