`<wa-icon>` を Font Awesome 7.3.0 に対応し、Pro+ ファミリと新アニメーション・Canvas属性を追加
Web Awesome のアイコンコンポーネント <wa-icon> が Font Awesome 7.3.0 にアップデートされ、3 つの新しい Pro+ ファミリ、9 つの新アニメーション、そして Canvas 属性によるサイズ制御が導入されました。ドキュメントとテストも一式更新され、既存利用者への後方互換性も維持されています。
背景
以前のリリースではデフォルトライブラリが Font Awesome 7.2.0 に固定され、Pro+ の mosaic、pixel、vellum などは利用できませんでした。加えて、FA 7.3.0 が提供する新しいアニメーションや Canvas 機能は <wa-icon> では未実装でした。これらのギャップを埋めることで、Web Awesome が最新のアイコンエコシステムと同調し、デザイナーと開発者双方に一貫した体験を提供することが目的です。
技術的な変更
Icon ライブラリのフォルダマッピング拡張
packages/webawesome/src/components/icon/library.default.ts の FA_VERSION を '7.3.0' に更新し、getIconFolder() に新しいファミリ名のマッピングを追加しました。
const FA_VERSION = '7.3.0';
...
if (family === 'mosaic') { folder = 'mosaic-solid'; }
if (family === 'pixel') { folder = 'pixel-regular'; }
if (family === 'vellum') { folder = 'vellum-solid'; }
if (family === 'slab-duo') { folder = 'slab-duo-regular'; }
if (family === 'slab-press-duo') { folder = 'slab-press-duo-regular'; }
この変更により、<wa-icon family="mosaic" ...> などの記述が正しい CDN パスに解決され、テストでも網羅的に検証されています。
アニメーション型と CSS の拡張
icon.ts に IconAnimation に 9 件の新アニメーションを列挙し、IconCanvas 型と canvas 属性を新規導入しました。
export type IconAnimation =
| 'beat-fade' | 'bounce' | 'flip' | 'flip-360' | 'shake' |
| 'spin' | 'spin-pulse' | 'spin-reverse' | 'spin-snap' |
| 'spin-snap-4' | 'spin-snap-8' | 'buzz' | 'wag' | 'float' |
| 'swing' | 'jello';
export type IconCanvas = 'fixed' | 'auto' | 'square' | 'roomy';
対応する CSS は icon.styles.ts に追加され、canvas の各モード（fixed, auto, square, roomy）がホスト要素のサイズを決定します。
/* Canvas — fixed (default) */
:host(:not([canvas])), :host([canvas='fixed']) { width: 1.25em; height: 1em; }
/* Auto width (deprecated alias) */
:host([canvas='auto']), :host([auto-width]:not([canvas])) { width: auto; height: 1em; }
/* Square canvas */
:host([canvas='square']) { width: 1.25em; height: 1.25em; }
/* Roomy canvas */
:host([canvas='roomy']) { width: 1.5em; height: 1.5em; }
さらに、9 つの新アニメーション用 @keyframes が CSS に組み込まれ、prefers-reduced-motion メディアクエリでも同様に無効化されます。
テストとドキュメントの刷新
icon.test.ts に新ファミリと canvas のマッピングテストを追加し、auto-width が canvas="auto" にマッピングされることを検証しています。ドキュメント icon.md は UI デモ、テーブル、アクセシビリティ指針などを改訂し、利用者が新機能をすぐに体感できるよう構成を統一しました。
設計判断
既存キーの拡張で後方互換性を確保
IconAnimation に新列挙子を追加しただけで、既存コードは変更不要です。canvas 属性は単一の enum とし、auto-width を非推奨として内部で同等扱いにしています。この設計により、従来の auto-width を使うアプリは警告なしに移行でき、将来的に属性名を統一しやすくなります。
ファミリマッピングは一元化
getIconFolder() に新しいケースを足す方式は、FA のフォルダ構造が変わった際の差分が最小限に抑えられます。個別のロジックを増やさずに新しい Pro+ パックをサポートできる点が、メンテナンス性の向上に寄与しています。
アニメーション設定の拡張は型安全を維持
新アニメーションの追加は 型定義 のみで完結し、ランタイムロジックに手を加える必要がありません。これにより TypeScript の型チェックが新機能を自動的に捕捉し、開発者は IDE 補完で正しいキーを利用できます。
まとめ
この PR は <wa-icon> を Font Awesome 7.3.0 に完全適合させ、Pro+ ファミリ、9 種類の新アニメーション、そして Canvas 属性という三つの主要拡張を実装しました。既存の auto-width 後方互換を保持しつつ、型安全と一元管理を意識した設計判断が随所に見られ、今後のアイコン拡張やメンテナンスをシンプルに保つ基盤が整いました。