Angular 图标库(与图标集无关)| ng-hub-ui-icons
与图标集无关的 Angular 图标:通过一个 <hub-icon> / [hubIcon] API 渲染 Font Awesome、Bootstrap Icons、Material Symbols、Solar 或你自己的 SVG,并用 CSS 变量设置主题。
最后更新 2026年9月21日
概览
团队为何搜索这个库
当你想用一个 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] 指令。
示例:
配置
配置
<hub-icon name="house" />pack="bi"pack="ms"name="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
Font Awesome
Bootstrap Icons
Bootstrap Icons
Material Symbols
Material Symbols
Solar
Solar
自定义 SVG
自定义 SVG
SVG 精灵图
SVG 精灵图
图片
图片
变体
变体
主题与集成
用 --hub-icon-* 令牌统一为所有图标包设置主题,并在其他 ng-hub-ui 组件中渲染图标。
示例:
主题
主题
按钮集成
按钮集成
核心特性
最近更改
Version 22.3.3 - 9/21/26, 12:00 AM
fixed: The hubIcon directive builds its sprite and image nodes instead of interpolating markup. The use and img render kinds were assembled as an HTML string, so a quote inside the resolved href, src or alt closed the attribute and the rest landed in the host as markup.
Version 22.3.2 - 9/16/26, 12:00 AM
changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.
Version 22.3.1 - 9/8/26, 12:00 AM
added: ng-hub-ui-ds is declared as an optional peer dependency (>=22.0.0). The whole --hub-icon-* block resolves through the family --hub-sys-* / --hub-ref-* ladder, which is how an icon follows the theme ink and its dark mode without being told to, and the manifest said nothing about it, so a consumer reading the package on npm had no way to learn which package supplies those values. It is genuinely optional: every token ends in a literal fallback and the renderer works without it.
Version 22.3.0 - 9/7/26, 12:00 AM
fixed: A colour utility on an icon does something again. <hub-icon class="text-danger"> came out in the default ink, and so did text-warning, text-success and every other utility: the library declared its own color in a rule named .hub-icon — one class, exactly what a utility is — and this stylesheet is injected at runtime, so it always lands after the sheet the application shipped. Tied on specificity, decided by source order, the primitive won. Every rule the library lands on the icon element is now written through :where(), which matches the same element and contributes zero specificity, so any declaration a consumer writes wins whatever the order — including classes this library will never hear of. Two consequences worth reading before upgrading, in BREAKING_CHANGES.md.
changed: The color input is now also written as an inline color, beside the --hub-icon-color it has always set: with the token read from a zero-specificity rule it would otherwise lose to a utility class on the same element, and an input written on one icon and no other is the more deliberate of the two.
changed: An SVG icon now takes its fill from currentColor instead of var(--hub-icon-color). The element's own color is where the token, a utility and the color input have already been resolved against each other, so reading it back keeps a drawn glyph and a filled path the same colour.
Version 22.2.0 - 9/7/26, 12:00 AM
added: label on the [hubIcon] directive, the same accessible-name input hub-icon already had: it exposes the host as role="img" with that aria-label, and without it the icon is decorative.
fixed: A screen reader no longer reads the icon's name out loud. The directive declared nothing but class="hub-icon" on its host, so every icon drawn with [hubIcon] was an unlabelled element in the accessibility tree; and with a ligature font such as Material Symbols the mechanism that draws the glyph is the icon's name written as text inside the element, so what got announced was the word "home" beside the link that already said Home. The text has to stay for the glyph to be drawn, so it is hidden rather than removed: a label-less icon is now aria-hidden="true" and a labelled one is role="img" with its aria-label. This is what hub-icon has always done; the directive had been left behind. Breaking for a host carrying its own role, aria-label or aria-hidden — see BREAKING_CHANGES.md.
Version 22.1.3 - 9/6/26, 12:00 AM
added: FUNCTIONALITIES.md, the per-feature coverage table the rest of the ecosystem ships, so a reader can see what the library does and which parts a live example actually demonstrates instead of inferring both from the list of examples.
fixed: The cssVars bridge now follows the pack that actually draws the icon. resolve() expands the pack:variant:name shorthand but the bridge lookup read the pack input alone, so an icon written with the shorthand was dressed with the default pack's custom properties, or with none, while binding the pack explicitly got the right ones. HubIconRegistry.cssVars() takes the icon name as an optional second argument so both entry points expand the same reference the same way and existing calls keep working. Latent for consumers of the shipped presets, none of which declares a bridge, and breaking for anyone who wrote a pack with one and used the documented shorthand.
fixed: The input table now describes the directive as well as the component. name was listed as required for both forms, but on [hubIcon] it is optional and falls back to the value bound to the directive, and hubIcon itself appeared in no table at all, so the only way to learn it existed was to read the source. The documentation links pointed at the site root too, leaving the reader to hunt for the icons page, and now open it directly.
fixed: The stylesheets are reachable by the subpath the README documents. The manifest declared no exports, so ng-packagr generated the minimal map and every sheet shipped in styles/ stayed outside the package's public surface. Resolvers that fall back to the filesystem found them anyway, which is why nobody noticed, while anything resolving strictly through exports answered ERR_PACKAGE_PATH_NOT_EXPORTED on the very line the docs tell you to write. The styles subpath now resolves, along with the icon, icon-base and icon-theme sheets.
Version 22.1.2 - 9/1/26, 12:00 AM
changed: The package manifest's homepage now points at this library's own documentation page instead of the site root, so the link a registry shows beside the package lands on the reference the reader was already after.
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-icons 自带图标集吗?
不带,这正是它的设计。这个包完全不附带图标——没有字体,没有 SVG 文件,也没有图标数据——并且不依赖任何图标集。它渲染的是你已经在用的那一套:在应用里加载那套图标的 CSS 或字体,注册一个 pack,<hub-icon name="house" /> 就会通过它解析。Font Awesome、Bootstrap Icons、Material Symbols 和 Solar 都有现成的预设,其他图标集则交给 classPack、ligaturePack 和 svgPack。
在 Angular 里怎么注册一个图标包?
在应用的 providers 里写 provideHubIcons({ defaultPack: 'fa', packs: { fa: faPack() } })。一个 pack 就是一个解析器,把名称和可选的 variant 转成一份渲染规格,它可以产出 CSS class 字形、连字、内联 SVG、指向你自己雪碧图的引用,或者一个 img。name 也接受 pack:variant:name 这种简写,而 pack 和 variant 输入的优先级高于它。什么都没注册时,图标渲染为空,原因会送到你的 ErrorHandler,而不是控制台。
hub-icon 和 hubIcon 有什么区别?
组件是完整的 API:name、pack、variant、size、color、label 和 spin。指令把同一个字形放到你已有的元素上,只接受 name、pack、variant 和 label——尺寸、颜色和旋转都交给你的 CSS——而且不配合组件单独使用时,要自己用 @use 'ng-hub-ui-icons/styles' 导入样式表。两者都会接管宿主上的 role、aria-label 和 aria-hidden,所以无障碍名称要走 label:手写在那个元素上的 aria-label 会被覆盖。
怎么调整图标的大小和颜色?
默认情况下它跟随所处的环境:--hub-icon-size 是 1em,--hub-icon-color 是 currentColor,所以标题里的图标什么都不用设,就和标题一样大、一样的颜色。size 和 color 输入会把这两个属性以内联方式写到宿主上,优先级高于写在同一个元素上的 class,所以两种方式选一种,别混用。两点注意:来自 img pack 的位图图标会忽略 color,而旋转动画固定为一秒,没有可以改它的令牌。