Angular-Icon-Bibliothek (set-agnostisch) | ng-hub-ui-icons

Set-agnostische Angular-Icons: rendere Font Awesome, Bootstrap Icons, Material Symbols, Solar oder eigene SVGs über eine <hub-icon> / [hubIcon]-API, thematisiert mit CSS-Variablen.

Übersicht

Warum Teams nach dieser Bibliothek suchen

Nutze diese Angular-Icon-Bibliothek, wenn du eine API für jedes Icon-Set willst — ohne harte Abhängigkeit von einem bestimmten Pack, Sets frei mischen und alle über --hub-icon-*-CSS-Variablen thematisieren.

Installieren

npm install ng-hub-ui-icons

Springen zu

Ideal für

  • Nutze eine Icon-API in einer App, die Font Awesome und Material Symbols mischt.
  • Thematisiere Größe und Farbe jedes Icons über CSS-Variablen, mit Dark Mode zur Laufzeit.
  • Platziere ein <hub-icon> in jeder Komponente — Buttons, Menüs, Links — per Projektion, ohne Adapter.
  • Registriere dein eigenes SVG-Pack, um Marken-Icons über dieselbe Komponente auszuliefern.

Über icons

ng-hub-ui-icons entkoppelt, wie du ein Icon referenzierst, vom Set, das es zeichnet. Ein Pack ist ein reiner Resolver vom Namen zu einer Render-Spec; die Bibliothek liefert Fabriken und Presets für Font Awesome, Bootstrap Icons, Material Symbols und Solar, bündelt aber keines davon. Komponente und Direktive rendern klassen-, ligatur-, sprite-, Inline-SVG- oder Bild-Icons, alle einheitlich über --hub-icon-*-Tokens thematisiert.

Funktionsleitfäden

Icons rendern

Rendere jedes Icon-Set über eine API — Packs, Varianten und die [hubIcon]-Direktive.

Beispiele:
Einrichtung

Einrichtung

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
Eigenes SVG

Eigenes SVG

SVG-Sprite

SVG-Sprite

Bild

Bild

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

Varianten

FA solid / regular
MS outlined/round/sharp
Direktive

Direktive

HomesettingsSettingsDelete

Theming & Integration

Thematisiere jedes Pack mit --hub-icon-*-Tokens und rendere Icons in anderen ng-hub-ui-Komponenten.

Beispiele:
Theming

Theming

Button-Integration

Button-Integration

Hauptfunktionen

Letzte Änderungen

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.

Verwandte Bibliotheken

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