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:`<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_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 { }

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

<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下载