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

Иконки Angular, не зависящие от набора: отрисовка Font Awesome, Bootstrap Icons, Material Symbols, Solar или собственных SVG через единый API <hub-icon> / [hubIcon] с темизацией CSS-переменными.

Последнее обновление 8 авг. 2026 г.

Обзор

Почему команды ищут эту библиотеку

Используйте эту библиотеку иконок Angular, когда нужен единый API для любого набора — без жёсткой зависимости от конкретного пака, со свободным смешиванием наборов и темизацией через CSS-переменные --hub-icon-*.

Установка

npm install ng-hub-ui-icons

Перейти к

Идеально для

  • Используйте единый API иконок в приложении, где смешаны Font Awesome и Material Symbols.
  • Темизируйте размер и цвет каждой иконки через CSS-переменные, с тёмной темой во время выполнения.
  • Помещайте <hub-icon> в любой компонент — кнопки, меню, ссылки — через проекцию, без адаптера.
  • Зарегистрируйте собственный SVG-пак, чтобы поставлять брендовые иконки через тот же компонент.

О библиотеке icons

ng-hub-ui-icons отделяет то, как вы ссылаетесь на иконку, от того, какой набор её рисует. Пак — это чистый резолвер из имени в spec отрисовки; библиотека поставляет фабрики и пресеты для Font Awesome, Bootstrap Icons, Material Symbols и Solar, но не включает ни один из них. Компонент и директива отрисовывают иконки по классу, лигатуре, спрайту, встроенному SVG или изображению, все единообразно темизируются через токены --hub-icon-*.

Руководства по возможностям

Отрисовка иконок

Отрисовывайте любой набор иконок через единый API — паки, варианты и директива [hubIcon].

Примеры:
Настройка

Настройка

Default pack (fa)<hub-icon name="house" />
Explicit pack="bi"pack="bi"
Explicit pack="ms"pack="ms"
Shorthandname="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 Bootstrap Icons Material Symbols Solar
Font Awesome

Font Awesome

Solid
Regular
Brands
Spin
Bootstrap Icons

Bootstrap Icons

Outline
Filled (-fill)
Material Symbols

Material Symbols

Glyphs
Families
FILL axis
Solar

Solar

Bold
Families
Свой SVG

Свой SVG

SVG-спрайт

SVG-спрайт

Изображение

Изображение

es flagfr flagde flagjp flagus flagbr flag
es flages flages flag
Варианты

Варианты

FA solid / regular
MS outlined/round/sharp
Директива

Директива

HomesettingsSettingsDelete

Темизация и интеграция

Темизируйте каждый пак токенами --hub-icon-* и отображайте иконки внутри других компонентов ng-hub-ui.

Примеры:
Темизация

Темизация

Интеграция с кнопками

Интеграция с кнопками

Ключевые возможности

Последние изменения

Version 22.1.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.1.0 - 7/7/26, 12:00 AM

added: hub-icon-theme(...) mixin — one-call token theming for <hub-icon> / [hubIcon]: color, size, and the variable-font axes weight / fill / grade / optical-size. Null-defaulted and additive; @use 'ng-hub-ui-icons/styles' as *;.

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.

Связанные библиотеки

ng-hub-ui-buttons ng-hub-ui-badges ng-hub-ui-nav