Angular アイコンライブラリ（セット非依存）| ng-hub-ui-icons
セット非依存の Angular アイコン：Font Awesome、Bootstrap Icons、Material Symbols、Solar、独自 SVG を 1 つの <hub-icon> / [hubIcon] API で描画し、CSS 変数でテーマ化。
スタイル
ミックスインとスタイル
Override the `--hub-icon-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the defaults. `color` defaults to `currentColor`, so an icon inherits its surrounding text colour unless themed. Token-based and self-contained.
Theming with hub-icon-theme
| ミックスイン | パラメータ | 説明 |
|---|---|---|
| Theming | ||
hub-icon-theme() | $color--hub-icon-color$size--hub-icon-size$weight--hub-icon-weight$fill--hub-icon-fill$grade--hub-icon-grade$optical-size--hub-icon-optical-size | One-call token theming for `<hub-icon>` / `[hubIcon]` |
CSS 変数
6 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
Icon
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-icon-size | 1em | length | アイコンサイズ（グリフは font-size、SVG は幅/高さ）。 |
--hub-icon-color | currentColor | color | アイコンの色（グリフは color、SVG は fill）。 |
--hub-icon-fill | 0 | color | Material Symbols の FILL 軸。 |
--hub-icon-weight | 400 | string | Material Symbols の wght 軸。 |
--hub-icon-grade | 0 | string | Material Symbols の GRAD 軸。 |
--hub-icon-optical-size | 24 | length | Material Symbols の opsz 軸。 |