如何更好使用|如何更好使用 ng-zorro-antd 图标如何更好使用ng-zorro-antd图标

自 ng-zorro-antd 1.7.x 以后图标发生破坏性变更，虽然带了诸多优势，同时也带来几个劣势：

若采用动态加载会产生额外的HTTP请求
若静态加载需要逐一注册图标
st 组件的 format 参数无法直接指定图标

ng-alain 默认使用静态加载的做法，毕竟后端使用图标相对于比较有限，即使将 svg 都打包进脚本相比较之前整个 styles 体积上是所有减少，但比较并不多。
而针对以上问题，ng-alain 提供几种方案。
使用icon插件（推荐）尽可能从项目中分析并生成静态 Icon，插件会自动在 src 目录下生成两个文件：

src/style-icons.ts 自定义部分无法解析（例如：远程菜单图标）
src/style-icons-auto.ts 命令自动生成文件

自动排除 ng-zorro-antd 和 @delon 已经加载的图标。

ng g ng-alain:plugin icon

同时，需要手动在 startup.service.ts 中导入：

import { ICONS_AUTO } from '../../../style-icons-auto'; import { ICONS } from '../../../style-icons'; @Injectable() export class StartupService { constructor(iconSrv: NzIconService) { iconSrv.addIcon(...ICONS_AUTO, ...ICONS); } }

有效语法

动态加载动态加载，这是为了减少包体积而提供的方式。当 NG-ZORRO 检测用户想要渲染的图标还没有静态引入时，会发起 HTTP 请求动态引入。你只需要配置 angular.json 文件：

{ "assets": [ { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ] }

动态使用不管是静态或动态加载，依然无法解决原始方法 class="anticon anticon-" 的便利性，毕竟字符串就是字符串并非 Angular 模板无法被解析，而针对这个问题，提供两种解决办法。
类样式
事实上所有 Antd 图标都可以在 iconfont 找得到，可以点选自己需要的图标并生成相应的 css 文件或 cdn，最后在项目中可以直接使用 1.7.0 之前的写法。

注意：在项目编辑里加上 anticon anticon- 前缀才能同之前的类名保持一致。

// angular.json "styles": [ "src/iconfont.css" ],

如果非cnd还需要将相应的 icon 图标文件复制到 assets 目录下，同时修改 iconfont.css 中 @font-face 对应的 url 路径。
@angular/elements
【如何更好使用|如何更好使用 ng-zorro-antd 图标】动态加载的另一种方式是使用 @angular/elements，只需要 nz-icon 指令重新封装成组件。

import { Component, Input } from '@angular/core'; @Component({ selector: 'nz-icon', template: ``, }) export class IconComponent { @Input() type: string; }

同时在根模块里注册它。

import { createCustomElement } from '@angular/elements'; @NgModule({ declarations: [], entryComponents: [] }) export class AppModule { constructor(injector: Injector) { customElements.define('nz-icon', createCustomElement(IconComponent, { injector })); } }

最后。

@Component({ selector: 'app-demo', template: ``, }) export class DemoComponent {constructor(private san: DomSanitizer) { }value = https://www.it610.com/article/this.san.bypassSecurityTrustHtml( `icon: `, ); }

结论本文只是针对这一次 ng-zorro-antd 图标上的变更做一个总结，就我个人而言还是比较推荐静态加载的方式，这无关乎包体大小的问题，而是更加明确我需要什么所以我应加载什么。