共计 2507 个字符，预计需要花费 7 分钟才能阅读完成。
自 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);
}
}
有效语法
<i class=”anticon anticon-user”></i>
<i class=”anticon anticon-question-circle-o”></i>
<i class=”anticon anticon-spin anticon-loading”></i>
<i nz-icon class=”anticon anticon-user”></i>
<i nz-icon type=”align-{{type ? ‘left’ : ‘right’}}”></i>
<i nz-icon [type]=”type ? ‘menu-fold’ : ‘menu-unfold'” [theme]=”theme ? ‘outline’ : ‘fill'”></i>
<i nz-icon [type]=”type ? ‘fullscreen’ : ‘fullscreen-exit'”></i>
<i nz-icon type=”{{type ? ‘arrow-left’ : ‘arrow-right’}}”></i>
<i nz-icon type=”filter” theme=”outline”></i>
<nz-input-group [nzAddOnBeforeIcon]=”focus ? ‘anticon anticon-arrow-down’ : ‘anticon anticon-search'”></nz-input-group>
动态加载
动态加载，这是为了减少包体积而提供的方式。当 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
动态加载的另一种方式是使用 @angular/elements，只需要 nz-icon 指令重新封装成组件。
import {Component, Input} from ‘@angular/core’;
@Component({
selector: ‘nz-icon’,
template: `<i nz-icon [type]=”type”></i>`,
})
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: `
<div [innerHTML]=”value”></div>
`,
})
export class DemoComponent {
constructor(private san: DomSanitizer) {}
value = this.san.bypassSecurityTrustHtml(
`icon: <nz-icon type=”bell”></nz-icon>`,
);
}
结论
本文只是针对这一次 ng-zorro-antd 图标上的变更做一个总结，就我个人而言还是比较推荐静态加载的方式，这无关乎包体大小的问题，而是更加明确我需要什么所以我应加载什么。