デザインシステム向けSVGスプライト

デザインシステム向けSVGスプライト

デザインシステムにはアイコン管理のスケーラブルでメンテナンス性の高いアプローチが必要です。SVGスプライトは柔軟性とパフォーマンスを兼ね備えた理想的な基盤です。

アイコン命名規則

一貫した命名スキームを確立します：

{category}-{name}[-{variant}]

例：
  nav-home
  action-delete
  status-success
  arrow-up

サイズバリアント

一貫したグリッド上でアイコンをデザインし、サイズバリアントを用意します：16（小）、20（コンパクト）、24（デフォルト）、32（大）。

テーマサポート

テーマ対応可能なデザインシステムでは、すべてのアイコンがcurrentColorを使用すべきです。CSS変数でアイコン色を制御し、ライトテーマとダークテーマに対応します。

コンポーネントAPI

制御されたAPIでスプライトシステムをラップします。型安全なunionによるアイコン名、サイズトークン、カラートークン、アクセシビリティ用のtitleなどのpropsを持つコンポーネントを設計します。

バージョニング

セマンティックバージョニングに従います：Patch（既存アイコンのバグ修正）、Minor（新アイコン追加）、Major（アイコンの削除または名前変更）。

配布

スプライトSVGファイル、TypeScript型定義、フレームワーク固有のコンポーネント、プロジェクト固有のサブセット生成CLIを含むnpmパッケージとして配布します。