SVG を SolidJS コンポーネントに変換

SVG コードから SolidJS のアイコンコンポーネントを作成します。出力は Solid の属性の慣例に従い、props を JSX.SvgSVGAttributes で型付けし、リアクティブ性も保ちます。

Solid と React の違い

Solid の JSX は属性をそのまま DOM に反映するため、stroke-width や class などの SVG 属性はファイルに書かれたとおりに保持されます。React のようにキャメルケースや className に書き換える必要はありません。

Solid の props はリアクティブなゲッターなので、分割代入するとリアクティブ性が失われます。size プロパティを有効にすると、ツールは splitProps で size と残りの props を分け、残りを <svg> に展開するため、すべての値がリアクティブなまま保たれます。

生成される TypeScript の型

props は solid-js からインポートした JSX.SvgSVGAttributes<SVGSVGElement> 型で、すべての SVG 属性とイベントハンドラをカバーします。size オプションを有効にすると、型に { size?: number | string } が追加されます。

SolidStart での使い方

始め方：

出力を src/components フォルダに IconName.tsx として保存します。
インポートして <IconName size={18} class="icon" /> と描画します。
currentColor を使えば周囲の文字色を継承できます。
ref は通常の ref プロパティで渡せます。Solid では forwardRef は不要です。

よくある質問

Solid 向けに属性をキャメルケースにしないのはなぜ？

Solid は DOM 要素に属性を直接設定します。DOM 上の SVG 属性は大文字小文字を区別し、ハイフンを含むため、元の名前を保つのが最も確実な出力です。

forwardRef と memo は Solid にも適用されますか？

いいえ。Solid のコンポーネントは一度だけ実行され、ref も通常の prop として渡されるため、Solid を選んだ場合これらの React 専用オプションは無視されます。

コンポーネントはリアクティブなままですか？

はい。ツールは props を分割代入しません。size プロパティは splitProps で扱い local.size として読むため、要素を作り直すことなく更新が反映されます。

出力を Astro で使えますか？

はい。Astro は @astrojs/solid-js インテグレーションで Solid コンポーネントをサポートしており、ハイドレートしない限り JavaScript を送らずにサーバー側でアイコンを描画できます。