Bootstrap IconsのSVG width属性による表示サイズ固定を解消

WebAwesomeの<wa-icon>コンポーネントで、Bootstrap Iconsライブラリのアイコンがfont-sizeによるサイズ変更に応じなかった問題が解決されました。SVGのwidth属性がCSS指定を上書きしていたため、明示的にwidth: autoを指定する変更が加えられています。

背景

Bootstrap Iconsライブラリは、SVG要素にwidth属性を含めて返します。この属性値がCSSのfont-size指定よりも優先されるため、<wa-icon>のサイズ変更が効かない問題が#1818で報告されました。

他のアイコンライブラリ（Font Awesomeなど）ではこの問題は発生しておらず、Bootstrap Icons特有の動作です。SVG要素に属性としてwidthやheightが指定されている場合、CSS側で明示的に上書きしない限り、属性値が優先される仕様によるものです。

ユーザーはfont-sizeプロパティでアイコンサイズを制御することを期待しているため、この動作は直感に反します。

技術的な変更

packages/webawesome/src/components/icon/icon.styles.tsのスタイル定義にwidth: autoが追加されました。

svg {
  height: 1em;
  overflow: visible;
  width: auto;

  /* Duotone colors with path-specific opacity fallback */
  path[data-duotone-primary] {

既存のheight: 1em指定により、高さはfont-sizeに応じて変化します。width: autoを追加することで、SVGのwidth属性が存在する場合でもCSS側の指定が優先され、アスペクト比を保ちながら幅も自動調整されるようになります。

この変更により、Bootstrap Iconsを含むすべてのアイコンライブラリで、font-sizeによる一貫したサイズ制御が可能になりました。width属性を持たないアイコンライブラリへの影響はなく、autoはデフォルトの動作を明示しているに過ぎません。

設計判断

CSSのスタイル定義への1行追加という、シンプルで影響範囲の少ない修正方針が採用されました。

#1818では「width: autoを追加することで修正可能」と提案されており、その提案どおりの実装が行われています。既存のheight: 1em指定と対になる形でwidth: autoを配置することで、SVGのアスペクト比保持という標準的な動作を活用した設計です。

まとめ

本PRは、Bootstrap IconsのSVG属性がCSSを上書きしていた問題を、width: autoの1行追加で解決した変更です。アイコンライブラリごとの実装の違いを意識させず、font-sizeによる統一的なサイズ制御を実現しています。