SVG to JSX

SVG to JSX は SVG マークアップを React コンポーネントまたはプレーンな JSX 要素に変換します。属性は React の名前に変換され(class → className、stroke-width → strokeWidth、fill-rule → fillRule、clip-path → clipPath、xlink:href → xlinkHref)、インライン style 文字列は style オブジェクトになり、viewBox は常に保持されるためアイコンは正しく拡大縮小されます。

1. 1.SVG マークアップを貼り付けるか、.svg ファイルをドロップまたは選択するか、サンプルを読み込みます。
2. 2.サニタイズ済みプレビューと削除された安全でない項目を確認します。
3. 3.コンポーネント名を設定し、JSX または TSX 出力を選びます。
4. 4.必要に応じてラッパー、props の展開、width/height の削除、currentColor を切り替えます。
5. 5.コードをコピーするか、.jsx または .tsx ファイルとしてダウンロードします。

props の展開により、className、サイズ、イベント props がコンポーネントからルートの <svg> に渡されます。TSX では SVGProps<SVGSVGElement> 型が追加されます。width と height を削除すると、viewBox を通じて CSS でサイズを制御できます。currentColor は単色の fill と stroke を置き換え、アイコンが文字色を継承するようにします。none、transparent、グラデーション(url(...))、CSS 変数は変更しません。空白の整理は要素間のコメントと空白だけのテキストを削除する安全な整理で、完全な SVG 最適化ではありません。装飾用アイコンではアクセシビリティ属性をオフにすると title、desc、role、ARIA を削除して aria-hidden を追加します。意味のあるアイコンにはタイトルを入力すると role="img" 付きでラベル付けされます。

すべての入力はプレビューと変換の前にサニタイズされます。<script>、<foreignObject>、onclick などのイベントハンドラー、javascript: URL、外部の画像やリソースへの参照、未対応の要素は削除され、一覧で報告されます。DOCTYPE 宣言と XML エンティティは拒否されます。プレビューはサニタイズ済みのマークアップを画像として表示するだけなので、SVG 内の処理は実行されません。SVG テキストの上限は 5 MB です。未対応の要素は除去されるため、複雑なイラストではプレビューを元の SVG と比較してください。