SVGアイコンを関数コンポーネントで包むとき、className や fill だけを分割代入して残りのpropsを捨てると、呼び出し側が渡した aria-hidden、role、イベント、data属性などが実DOMへ届かない。見た目は正常でもアクセシビリティ指定やテスト用属性が静かに無効になるため発見しにくい。

コンポーネントの引数型をSVG標準propsにし、個別に扱う値以外の残余propsをルートのsvg要素へ展開する。既定のclassやfillをコンポーネント側で確実に適用したい場合は、残余propsを先に展開してから明示属性を置き、上書き順も意図的に決める。

検証ではアイコンの形だけでなく、呼び出し側から渡したアクセシビリティ属性またはdata属性が実DOMのsvgに残ることをコンポーネントテストで確認する。共通UIラッパーは型上受け取れる属性と実際に転送する属性を一致させる。