Font Awesome 7.2.0へのアップグレードとGraphiteパックの対応

2026年02月13日 05:24 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2059

Web Awesome の <wa-icon> コンポーネントが Font Awesome 7.2.0 にアップグレードされ、新しい Graphite Pack を含む最新のアイコンセットが利用可能になりました。これにより、Pro+ ユーザーは新たなデザイン表現の選択肢を得ることになります。

背景

#2058 で報告されたように、Font Awesome 7.2.0 のリリースに伴い、<wa-icon> コンポーネントのアップグレードが必要になりました。Font Awesome 7.2.0 では、Pro+ ユーザー向けに新しい Graphite Pack が追加され、既存のアイコンパックと並んで利用できるようになっています。

Web Awesome は Font Awesome のアイコンライブラリを統合したコンポーネントライブラリであり、最新のアイコンセットを提供し続けることがユーザー体験の向上に直結します。

技術的な変更

packages/webawesome/src/components/icon/library.default.ts でバージョン定数とアイコンパックの処理ロジックが更新されました。

バージョン定数の更新:

const FA_VERSION = '7.2.0';

Graphiteパックの追加:

// Graphite (Pro+)
if (family === 'graphite') {
  folder = 'graphite-thin';
}

Graphite パックは thin バリアントのみを提供しており、family="graphite" と variant="thin" の組み合わせで利用できます。既存の Chisel、Etch、Jelly、Notdog パックの処理ロジックはそのまま維持されています。

ドキュメントの更新:

packages/webawesome/docs/docs/components/icon.md では、Pro+ パックの使用例が再構成されました。Notdog パックの例が末尾に移動し、Graphite パックの例が追加されています：

<div class="wa-flank" style="--flank-size: 10ch;">
  <a href="https://fontawesome.com/icons/packs/graphite" target="_blank">Graphite</a>
  <div class="wa-cluster" style="font-size: 1.5em;">
    <wa-icon family="graphite" variant="thin" name="house"></wa-icon>
  </div>
</div>

Notdog パックのデュオトーンアイコンの記述も、非推奨の variant="duo-solid" から推奨される family="notdog-duo" と variant="solid" の組み合わせに変更されています。

設計判断

既存のアイコンパック処理ロジックに新しいパックを追加する形で実装されました。getIconUrl 関数内の条件分岐が拡張され、Graphite パックの判定処理が Chisel、Etch パックの後に配置されています。

Pro+ パックの処理順序は、コード内でアルファベット順に整理されており、Graphite パックも Chisel、Etch の後、Jelly、Notdog の前に配置されました。この一貫性のある構造により、将来的な新しいパックの追加も同様のパターンで実装できます。

まとめ

本 PR は、Font Awesome 7.2.0 へのバージョンアップと Graphite パックの対応を実現した変更です。既存のアイコンパック処理パターンを踏襲しながら新しいパックを追加し、Pro+ ユーザーに新たなデザイン表現の選択肢を提供しています。非推奨の記法を推奨形式に置き換えるドキュメント改善も含まれており、一貫性のあるAPI使用を促進します。