SVGからReact/JSXへの変換器

SVGからReact JSXへの変換器は、生のSVGファイルを再利用可能なReactコンポーネントに変換します。すべてのSVG属性を手動で修正することなく、よりクリーンなアイコンコンポーネント、ブランドマーク、製品イラスト、デザインシステムの管理アセットを必要とする開発者向けに構築されています。SVGマークアップを貼り付けるか、UTF-8の .svg ファイルをアップロードし、必要なReactオプションを選択するだけで、生成されたコンポーネントをプロジェクトにコピーできます。

使い方

1. SVGの貼り付けまたはアップロード。 エディタに完全なSVGファイルを貼り付けるか、UTF-8の .svg ファイルをアップロードします。
2. コンポーネントの名前指定。 AlertIconやBrandMarkなどのPascalCaseのReactコンポーネント名を入力します。
3. Reactオプションの選択。 TypeScript、forwardRef、React.memo、タイトルのアクセシビリティ、スタイル変換、サニタイズ、プロパティの展開（スプレッド）オプションを選択します。
4. JSXへの変換。 「Reactコンポーネントに変換」をクリックして、コピー可能なJSXコードを生成します。
5. 確認とコピー。 変換の概要、警告、生成されたコードを確認してから、Reactプロジェクトにコピーします。

変換器が処理する内容

より優れたReact SVGコンポーネントのためのヒント

オリジナルの viewBox は、SVGの伸縮を制御するため、可能な限り保持してください。アイコンシステムの場合、width="1em" および height="1em" に設定すると、アイコンがテキストのサイズを継承しつつ、呼び出し側がプロパティでサイズを上書きできるようになります。わかりやすいPascalCaseのコンポーネント名を使用し、装飾的なSVGは必要に応じて aria-hidden でアクセシブルに保ち、情報を伝達する重要なアイコンにはtitleプロパティを使用してください。

FAQ

このSVGからReactへの変換器は何を変更しますか？

SVG XMLを解析し、className、camelCase化されたSVG属性、オプションのスタイルオブジェクト、プロパティ、forwardRef、タイトルのアクセシビリティ、エクスポート構文など、ReactフレンドリーなJSXにSVG属性を書き換えます。

Can I upload an SVG file? / SVGファイルをアップロードできますか？

はい。UTF-8の .svg ファイルをアップロードするか、SVGマークアップを貼り付けることができます。アップロードされたファイルはテキストとして読み込まれ、サーバー上でJSXに変換されます。

Does it sanitize SVG code? / SVGコードはサニタイズされますか？

サニタイズはデフォルトで有効になっています。変換器はscriptタグ、インラインイベントハンドラ、およびjavascript:リンクを削除するため、生成されたコンポーネントを使用前に安全に確認できます。

Why convert style attributes to objects? / なぜスタイル属性をオブジェクトに変換するのですか？

Reactでは、JSXを記述する際にstyleプロパティがオブジェクトであることを期待します。スタイルの文字列をオブジェクトに変換することで、出力が綺麗にコンパイルされ、CSSプロパティ名がcamelCaseに保たれます。

What is the best component name format? / 最適なコンポーネント名の形式は何ですか？

Use PascalCase such as AlertIcon or BrandMark. The converter cleans invalid characters and ensures the result starts with a valid React component identifier. / AlertIconやBrandMarkのようなPascalCaseを使用してください。変換器は無効な文字をクリーンアップし、結果が有効なReactコンポーネント識別子で始まるようにします。