Angular 图标库(与图标集无关)| ng-hub-ui-icons
与图标集无关的 Angular 图标:通过一个 <hub-icon> / [hubIcon] API 渲染 Font Awesome、Bootstrap Icons、Material Symbols、Solar 或你自己的 SVG,并用 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 轴。 |