Библиотека иконок для Angular (агностичная) | ng-hub-ui-icons

Иконки Angular, не зависящие от набора: отрисовка Font Awesome, Bootstrap Icons, Material Symbols, Solar или собственных SVG через единый API <hub-icon> / [hubIcon] с темизацией 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-size1emlength Размер иконки (font-size для глифов; ширина/высота для SVG).
--hub-icon-colorcurrentColorcolor Цвет иконки (color для глифов; fill для SVG).
--hub-icon-fill0color Ось FILL Material Symbols.
--hub-icon-weight400string Ось wght Material Symbols.
--hub-icon-grade0string Ось GRAD Material Symbols.
--hub-icon-optical-size24length Ось opsz Material Symbols.