Angular アイコンライブラリ（セット非依存）| ng-hub-ui-icons
セット非依存の Angular アイコン：Font Awesome、Bootstrap Icons、Material Symbols、Solar、独自 SVG を 1 つの <hub-icon> / [hubIcon] API で描画し、CSS 変数でテーマ化。
概要
チームがこのライブラリを探す理由
特定パックへの強い依存なしに、あらゆるアイコンセットを 1 つの API で扱いたいときに使う Angular アイコンライブラリ。セットを自由に混在させ、--hub-icon-* CSS 変数ですべてテーマ化できます。
インストール
npm install ng-hub-ui-iconsジャンプ
最適な用途
- Font Awesome と Material Symbols が混在するアプリで 1 つのアイコン API を使う。
- CSS 変数で各アイコンのサイズと色をテーマ化（実行時ダークモード対応）。
- <hub-icon> をボタン・メニュー・リンクなど任意のコンポーネントにプロジェクションで配置。アダプター不要。
- 独自の SVG パックを登録し、同じコンポーネントでブランドアイコンを配信。
について icons
ng-hub-ui-icons は「アイコンの参照方法」と「描画するセット」を分離します。パックは名前からレンダー spec への純粋なリゾルバで、Font Awesome・Bootstrap Icons・Material Symbols・Solar 向けのファクトリとプリセットを同梱しますが、セット自体はバンドルしません。コンポーネントとディレクティブは、クラス／リガチャ／スプライト／インライン SVG／画像のアイコンを描画し、すべて --hub-icon-* トークンで均一にテーマ化します。
機能ガイド
アイコンのレンダリング
1つのAPIで任意のアイコンセットを描画 — パック、バリアント、[hubIcon] ディレクティブ。
サンプル:
セットアップ
セットアップ
<hub-icon name="house" />pack="bi"pack="ms"name="fa:brands:github"Built-in presets — load the set's stylesheet once, then register its pack. Any other set works via a custom pack.
Font Awesome
Font Awesome
Bootstrap Icons
Bootstrap Icons
Material Symbols
Material Symbols
Solar
Solar
カスタム SVG
カスタム SVG
SVG スプライト
SVG スプライト
画像
画像
バリアント
バリアント
テーマと連携
--hub-icon-* トークンで全パックをテーマ化し、他の ng-hub-ui コンポーネント内にアイコンを描画。
サンプル:
テーマ
テーマ
ボタン連携
ボタン連携
主な機能
最近の変更
Version 22.0.0 - 7/1/26, 12:00 AM
added: Initial release: <hub-icon> component and [hubIcon] directive, agnostic to the icon set.
added: provideHubIcons pack registry; classPack / ligaturePack / svgPack factories and faPack / bootstrapPack / materialSymbolsPack / solarPack presets.
added: Uniform --hub-icon-* theming (size, color and variable-font axes), so one token set themes every pack identically.