SVGをJSXに

SVGをJSXに

SVGマークアップをReact JSXコンポーネントに変換します。属性名の変換・スタイルのオブジェクト化・TypeScript propsに対応。

SVGマークアップ

コンポーネント名（任意——React関数で包みます）ルート <svg> に {...props} を展開

マークアップはこのブラウザ内で解析・書き換えします。送信はしません。

1回に1つのSVG、200,000文字まで。属性はJSX形式に変換します（stroke-width → strokeWidth、class → className）。style=""文字列はstyleオブジェクトになります。

使い方

SVGマークアップを貼り付けます。
コンポーネント名とオプションを選びます。
JSX出力をコピーします。

対応範囲

HTML的に無効な属性を変換（class→className、stroke-width→strokeWidth、xlink:href→href）し、style文字列をオブジェクト化、コメントと処理命令を除去します。不正なXMLは位置付きで拒否し、部分出力はしません。