SVG to React JSX 変換器
生のSVGコードを、Reactで即時使用可能なJSXコンポーネントコードに変換
属性名をReactの命名規則（camelCase）に自動変換し、コンポーネント化します。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- SVGタグのコードを貼り付けます。
- 出力するコンポーネントの関数名を決定します。
- 変換を実行し、書き出されたReactコードをコピーして保存します。
よくある質問
- スタイルの変更などは外から行えますか？
- はい、propsをスプレッド展開する構造で出力されるため、呼び出し時にサイズや色の変更が可能です。
- classやstroke-widthのような元のHTML属性名は、className、strokeWidthのようなReact文法へ自動的に変換されますか?
- はい、変換の過程でclassはclassNameに、stroke-widthやfill-ruleのようにハイフンが入ったSVG属性名はJSXの規則に合わせてキャメルケース(strokeWidth、fillRule)へ自動的に変換されます。それ以外にもstyle="color:red"のような文字列形式のインラインスタイルも{ color: 'red' }のようなオブジェクト構文に変換されるため、追加の修正なしでそのまま貼り付けて使えます。
- classやstroke-widthのような元のHTML属性名は、className、strokeWidthのようなReact文法へ自動的に変換されますか?
- はい、変換の過程でclassはclassNameに、stroke-widthやfill-ruleのようにハイフンが入ったSVG属性名はJSXの規則に合わせてキャメルケース(strokeWidth、fillRule)へ自動的に変換されます。それ以外にもstyle="color:red"のような文字列形式のインラインスタイルも{ color: 'red' }のようなオブジェクト構文に変換されるため、追加の修正なしでそのまま貼り付けて使えます。