1.angular.json中引入
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
"styles": [
"src/styles.less",
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
],
2.在app.module中引入以下文件
import { NzIconModule } from 'ng-zorro-antd/icon';
import { IconDefinition } from '@ant-design/icons-angular';
import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';
const icons: IconDefinition[] = [AccountBookFill, AlertOutline, AlertFill];
@NgModule({
declarations: [
AppComponent
],
imports: [
NzIconModule.forRoot(icons),
],
providers: [],
bootstrap: [AppComponent]
})
在需要的html文件用需要的图标即可,但有些图标显示不出来还报错,这时可以考虑引入外部的svg图标,方法如下(例子):
1.在assets文件中新建icons文件用于存放外部引入的svg图标。
2.在icons中新建icon-def.ts文件
export interface IconDef{
name:string;
svg:string
}
import {IconDef} from './icon-def'
export const TABLE_UP:
IconDef={
name:'table-up',
svg:'svg的路径'
}
4.在icons中新建index.ts文件,引入icon图标文件,例:
import { IconDef } from './icon-def';
import { TABLE_UP } from './table-up';
export const CUSTOM_ICONS: Array<IconDef>=[
TABLE_UP,
(需要使用到什么icon图标文件就引入什么文件)
]
5.在app文件下新建icons-provider.moudle.ts文件,管理引入的外部svg,例:
import { NgModule } from '@angular/core';
import { NZ_ICONS, NzIconModule, NzIconService } from 'ng-zorro-antd/icon';
import { IconDef } from 'src/assets/icons/icon-def';
import { CUSTOM_ICONS } from '../assets/icons/index'
const icons: never[] = [
]
@NgModule({
imports: [NzIconModule],
exports: [NzIconModule],
providers: [
{
provide: NZ_ICONS,
useValue: icons
}
]
})
export class IconsProviderModule {
constructor(
private nzIconService: NzIconService
) {
// 管理引入的外部svg
CUSTOM_ICONS.forEach((icon: IconDef)=> { this.nzIconService.addIconLiteral(`ftc:${icon.name}`,icon.svg)
});
}
}
6.最后使用方式,在html中引入即可
<i nz-icon nzType="ftc:table-up" nzTheme="outline"></i>