Angular 图标库（与图标集无关）| ng-hub-ui-icons

与图标集无关的 Angular 图标：通过一个 <hub-icon> / [hubIcon] API 渲染 Font Awesome、Bootstrap Icons、Material Symbols、Solar 或你自己的 SVG，并用 CSS 变量设置主题。

概览

团队为何搜索这个库

当你想用一个 API 适配任意图标集时使用这个 Angular 图标库 —— 不强依赖特定图标包，可自由混用图标集，并通过 --hub-icon-* CSS 变量统一设置主题。

安装

npm install ng-hub-ui-icons

跳转到

适用于

  • 在混用 Font Awesome 与 Material Symbols 的应用中使用同一套图标 API。
  • 通过 CSS 变量为每个图标设置尺寸与颜色，并支持运行时深色模式。
  • 通过内容投影将 <hub-icon> 放入任意组件（按钮、菜单、链接），无需适配器。
  • 注册你自己的 SVG 图标包，用同一个组件交付品牌图标。

关于 icons

ng-hub-ui-icons 将“如何引用图标”与“由哪个图标集绘制”解耦。图标包是从名称到渲染规格的纯解析器；该库为 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.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