Ng-Zorro框架静态加载SVG图标
ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular UI 组件库。提供了丰富的常用页面组件。其中NzIconModule 提供了图标功能，可以方便地使用各种框架自带的SVG图标，也可以添加自己的svg作为图标。
框架加载图标有静态加载和动态加载两种方式。静态方式是在模块中手动的加入需要使用的图标或者全部框架图标。动态加载是在页面运行时才从远程服务器获取图标资源文件。动态加载相对静态加载可以减少包体积。但是一般我们的页面使用的图标并不是太多，使用静态方式加载必要的图标就可以了。
本文通过示例介绍静态加载系统图标和三方svg图标的方法。
一、加载框架图标
在AppModule 里边添加想要使用的框架图标：
import { IconDefinition } from '@ant-design/icons-angular';
import { NzIconModule } from 'ng-zorro-antd/icon';
// 引入你需要的图标，比如你需要 fill 主题的 AccountBook Alert 和 outline 主题的 Alert
import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';
const icons: IconDefinition[] = [ AccountBookFill, AlertOutline, AlertFill ];
@NgModule({
declarations: [
AppComponent
],
imports: [
NzIconModule.forRoot(icons)
]
bootstrap: [ AppComponent ]
})
export class AppModule {
}其中 AccountBookFill, AlertFill, AlertOutline 可以根据官方文档标注的图标代码加上主题作为图标代码。
官方文档地址： 图标(Icon) | NG-ZORRO
比如下图中的 DownCircle 图标，三种主题都有对应图标：
如果想使用 Outlined 风格，引入的图标代码为 ： DownCircleOutline
如果想使用 Filled 风格，引入的图标代码为 ： DownCircleFill
如果想使用 Two Tone 风格，引入的图标代码为 ： DownCircleTwoTone
二、加载三方SVG
通过调用框架方法 NzIconService.addIconLiteral() 添加SVG图标：
/**
* Register an icon. Namespace is required.
* @param type
* @param literal
*/
addIconLiteral(type: string, literal: string): void;注释要求 type字段必须要求有命名空间。
1、新建文件保存需要添加的图标svg：
export const ICON_SVGS = [
{type : 'ns:aa', literal:``},
{type : 'ns:bb', literal:``},
{type : 'ns:cc', literal:``}
]为满足方法要求 type 字段须为 "aa:bb" 的格式，冒号前面部分将会被识别为命名空间。
需要注意的是 svg 内部分fill颜色需要修改为currentColor，不然图标将不会应用外部样式的颜色。
2、编写启动服务注册图标：
@Injectable({
providedIn: 'root'
})
export class StartUpService {
constructor(
private iconService: NzIconService
) { }
loadSvgIcon() {
// 这里的 ICON_SVGS 就是上一步保存的 ICON_SVGS
ICON_SVGS.forEach(svg => {
this.iconService.addIconLiteral(svg.type, svg.literal);
});
}
}3、将启动服务配置到页面启动项中：
在AppModule中添加以下代码：
export function StartUpServiceFactory(startUpService: StartUpService) {
return () => startUpService.loadSvgIcon();
}
const APP_INIT_PROVIDERS = [
StartUpService,
{
provide: APP_INITIALIZER,
useFactory: StartUpServiceFactory,
deps: [StartUpService],
multi: true
}
];
@NgModule({
declarations: [
AppComponent,
//...
],
imports: [
BrowserModule,
AppRoutingModule,
NzIconModule.forRoot(icons),
//...
],
providers: [
{ provide: NZ_I18N, useValue: zh_CN },
...APP_INIT_PROVIDERS,
// ...
],
bootstrap: [AppComponent]
})
export class AppModule { }完成以上步骤，就能在页面中按照官方文档的说明方式调用图标了：
代码下载：Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码-Typescript文档类资源-CSDN下载