当前位置: 首页 > 工具软件 > NG-ZORRO > 使用案例 >

angular引入ng-zorro中的icon图标方法

宫坚
2023-12-01

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
}
  1. 在icons中新建需要引入的图标文件,例:table-up.ts文件(这里是可以创建多个引入的图标文件)
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>
 类似资料: