SVG to JSX変換器 - SVGをReactコンポーネントに変換 オンライン
SVGマークアップをReact JSX、TSX、React Nativeコンポーネントに即座に変換。SVG属性を最適化し、コピー可能なReactコードを生成。
よくある質問
SVG to JSXコンバーターとは何ですか？
SVG to JSXコンバーターは、標準のSVGマークアップをReactアプリケーションで使用できるJSX構文に変換します。'class'を'className'に変換したり、ハイフンで区切られた属性をcamelCaseに変更したり（例：'stroke-width'を'strokeWidth'に）、インラインスタイルをJavaScriptオブジェクトに変換したりします。
なぜReactでSVGをJSXに変換する必要があるのですか？
Reactは標準のHTMLとは異なる構文要件を持つJSXを使用します。'class'や'stroke-width'などのSVG属性は'className'や'strokeWidth'に変換する必要があります。インラインスタイルはJavaScriptオブジェクトにする必要があります。変換しないと、Reactは警告やエラーを発生させます。
SVGをJSXに変換するにはどうすればいいですか？
入力フィールドにSVGコードを貼り付けるか、SVGファイルをドラッグ＆ドロップするだけです。コンバーターが自動的に有効なJSXに変換します。その後、出力をReactコンポーネントに直接コピーできます。オプションで「コンポーネントでラップ」を有効にすると、完全なReactコンポーネントを生成できます。
SVG最適化は何をしますか？
SVG最適化は、SVGファイルから不要なデータを削除します。これには、エディターのメタデータ（Illustrator、Figma、Sketchなどのツールから）、XML宣言、コメント、空の属性が含まれます。これにより、SVGの見た目に影響を与えずにファイルサイズを削減します。
私のSVGデータは安全ですか？
はい、完全に安全です。このツールはすべてをブラウザ内で処理します - SVGコードがコンピューターから外部に送信されることはありません。サーバーへのアップロード、データ収集、外部APIコールは一切ありません。これにより、独自のアイコンや機密性の高いデザインアセットでも安全に使用できます。
React Native用にSVGを変換できますか？
はい！「React Native」タブを選択すると、react-native-svgライブラリと互換性のあるコードを生成します。SVGタグをReact Nativeの同等物に変換し（例：'svg'が'Svg'に、'path'が'Path'に）、属性もそれに応じて調整します。
TypeScriptをサポートしていますか？
はい。「TSX」タブを選択すると、TypeScriptインターフェースを持つ適切に型付けされたReactコンポーネントを生成します。生成されたコンポーネントには、適切なFC（Function Component）宣言とprop型が含まれます。
コード例
// SVG to JSX attribute conversion
const svgAttrToJsx = {
'class': 'className',
'stroke-width': 'strokeWidth',
'fill-rule': 'fillRule',
'clip-path': 'clipPath',
};
// Convert hyphenated to camelCase
const toCamelCase = (str) =>
str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
// Example usage
const attr = 'stroke-width';
const jsxAttr = svgAttrToJsx[attr] || toCamelCase(attr);
console.log(jsxAttr); // 'strokeWidth'