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:`<svg viewBox="0 0 1024 1024" fill="currentColor"><path d='...'></path></svg>`},{type : 'ns:bb', literal:`<svg viewBox="0 0 1024 1024" fill="currentColor"><path d='...'></path></svg>`},{type : 'ns:cc', literal:`<svg viewBox="0 0 1024 1024" fill="currentColor"><path d='...'></path></svg>`}
]

为满足方法要求 type 字段须为 "aa:bb" 的格式，冒号前面部分将会被识别为命名空间。

需要注意的是 svg 内部分fill颜色需要修改为currentColor，不然图标将不会应用外部样式的颜色。

2、编写启动服务注册图标：

@Injectable({providedIn: 'root'
})
export class StartUpService {constructor(private iconService: NzIconService) { }loadSvgIcon() {// 这里的 ICON_SVGS 就是上一步保存的 ICON_SVGSICON_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 { }

完成以上步骤，就能在页面中按照官方文档的说明方式调用图标了：

<span><i nz-icon nzType="down-circle" nzTheme="twotone"></i></span>
<span><i nz-icon nzType="ns:aa"></i></span>

代码下载：Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码-Typescript文档类资源-CSDN下载

Ng-Zorro框架静态加载SVG图标相关推荐

vue动态加载SVG文件并修改节点数据
先上一个马赛克图片叭. 接领导需求,动态实现电路图, 并附带放大.缩小功能. 以及不同的回路点击能弹窗显示相关节点的更多信息, 通俗一点讲: 随着用户点击放大和缩小, 点击位置保持不变,而且能实现点击 ...
img 加载 svg占位符_如何使用SVG作为占位符以及其他图像加载技术
img 加载 svg占位符 by José M. Pérez 由JoséM.Pérez 如何使用SVG作为占位符以及其他图像加载技术 (How to use SVG as a Placeholder, ...
android 载入svg动画,Android 加载SVG动画
Android 加载SVG动画 SVG 可以说是目前比较流行的图片格式,使用领域也十分广泛,例如:web 前端页面,Android ios 等移动应用.都可以使用 SVG 的图片格式.今天就要和大家谈 ...
PySide2动态/静态加载UI及程序发布
Python目前已经是一个"家喻户晓"的名词了,她可能用在很多行业领域,最牛逼的人工智能(AI).大数据(big data).今天要介绍的是Python图形化界面实现(GUI),记 ...
android中读取svg文件,Android如何加载SVG格式的矢量图
为何要加载SVG图片相对于.JPG和.PNG甚至.webp的图片来说,SVG的图片有两个优点,第一:省空间,APK瘦身有一个方面就是从图片瘦身,使用SVG图片可以大量减轻程序的大小.第二:省时间,切 ...
angular ng zorro框架日期框无法自适应宽度的解决方法
如果我们使用ng zorro框架的日期框时,就会发现,日期框的宽度总是固定的,无法像输入框一样自适应父节点<nz-form-control [nzSpan]="12"> ...
Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
动态加载和静态加载及其编译步骤
在类unix操作系统中,驱动加载方式一般分为:动态加载和静态加载,下面分别对其详细论述. 一.动态加载动态加载是将驱动模块加载到内核中,而不能放入/lib/modules/下. 在2.4内核 ...
动态加载vs静态加载
动态加载: 1:灵活,可以在需要的时候用LoadLibrary进行加载,在不需要的时候用FreeLibrary进行卸载,这样可以不必占用内存. 2:可以在没有dll时候发现,而不致程序报错. 3:加载 ...

Ng-Zorro框架静态加载SVG图标