Bibliothèque d'icônes Angular (agnostique) | ng-hub-ui-icons

Icônes Angular indépendantes du jeu : affichez Font Awesome, Bootstrap Icons, Material Symbols, Solar ou vos propres SVG via une seule API <hub-icon> / [hubIcon], thématisées par variables CSS.

Vue d’ensemble

Pourquoi les équipes recherchent cette bibliothèque

Utilisez cette bibliothèque d'icônes Angular pour disposer d'une seule API pour tout jeu d'icônes — sans dépendance forte à un pack précis, en mélangeant les jeux et en les thématisant via les variables CSS --hub-icon-*.

Installation

npm install ng-hub-ui-icons

Aller à

Idéal pour

  • Utilisez une seule API d'icônes dans une app qui mélange Font Awesome et Material Symbols.
  • Thématisez la taille et la couleur de chaque icône via des variables CSS, avec mode sombre à l'exécution.
  • Placez un <hub-icon> dans n'importe quel composant — boutons, menus, liens — par projection, sans adaptateur.
  • Enregistrez votre propre pack SVG pour livrer des icônes de marque via le même composant.

À propos de icons

ng-hub-ui-icons dissocie la façon de référencer une icône du jeu qui la dessine. Un pack est un résolveur pur du nom vers une spec de rendu ; la bibliothèque fournit des fabriques et des presets pour Font Awesome, Bootstrap Icons, Material Symbols et Solar, sans en empaqueter aucun. Le composant et la directive affichent des icônes par classe, ligature, sprite, SVG en ligne ou image, toutes thématisées uniformément via les tokens --hub-icon-*.

Guides de fonctionnalités

Rendu des icônes

Affichez n'importe quel jeu d'icônes via une seule API — packs, variantes et la directive [hubIcon].

Exemples:
Configuration

Configuration

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 personnalisé

SVG personnalisé

Sprite SVG

Sprite SVG

Image

Image

es flagfr flagde flagjp flagus flagbr flag
es flages flages flag
Variantes

Variantes

FA solid / regular
MS outlined/round/sharp
Directive

Directive

HomesettingsSettingsDelete

Thématisation et intégration

Thématisez chaque pack avec les tokens --hub-icon-* et affichez des icônes dans d'autres composants ng-hub-ui.

Exemples:
Thématisation

Thématisation

Intégration aux boutons

Intégration aux boutons

Fonctionnalités clés

Changements récents

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.

Bibliothèques associées

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