SVGからJsxへの変換

生の SVG マークアップを、そのまま貼り付けられる React コンポーネントに変換します。SVG 属性を React 互換のキャメルケースの props に書き換え（class を className に、stroke-width を strokeWidth に、xlink:href を xlinkHref にするなど）、インラインのスタイル文字列を React のスタイルオブジェクトに変換し、空要素や SVG 図形要素を自己閉鎖形式にして、デフォルトの xmlns="http://www.w3.org/2000/svg" 名前空間を除去します。

1. SVG マークアップ（<svg> と </svg> を含む必要があります）を入力ボックスに貼り付けます 2. Prettify をクリックすると、変換前にマークアップを自動インデントします（任意） 3. コンポーネント名を設定します（デフォルトは SvgComponent、英数字とアンダースコアのみ使用可） 4. 必要に応じて "use client" ディレクティブや useMemo フックを有効にします 5. Convert をクリックして JSX コンポーネントを生成し、クリップボードにコピーします

コンポーネント名フィールドでエクスポートされる識別子を制御します。"use client" チェックボックスを有効にすると、出力は独立した行に "use client" を先頭に付け、props を持たないデフォルトエクスポートになります。それ以外の場合は props を受け取り svg を返す名前付き const としてエクスポートされます。useMemo を有効にすると、SVG マークアップは useMemo(() => (...), []) で囲まれます。入力には <svg と </svg> の両方が含まれている必要があり、そうでない場合は無効な SVG エラーで拒否されます。