SVG の直接貼り付けは props の不統一を生みやすいため、変換前の整理と型設計をセットで行うのが有効です。
1) SVG 入力を正規化する
- 不要な group、metadata、style を削除する。
- viewBox を維持し、拡大縮小の一貫性を保つ。
- ID や mask 名を調整し、衝突を回避する。
2) 型安全なコンポーネントを作る
- React.SVGProps ベースで props を定義する。
- 幅・高さはデフォルト値を持たせつつ上書きを許可する。
- テーマ対応アイコンは currentColor を使う。
3) デザインシステムに統合する
- 配置ルールと export ルールを統一する。
- CI で属性チェックを行い品質を担保する。
- サイズトークンと aria 利用例をドキュメント化する。