Ng-Zorro framework statically loads SVG icons

        ng-zorro-antd is an Angular UI component library following the Ant Design design specification. Provides a wealth of commonly used page components. Among them, NzIconModule provides the icon function, you can easily use the SVG icons that come with various frameworks, and you can also add your own svg as icons.

        There are two ways to load icons in the framework: static loading and dynamic loading. The static method is to manually add the icons to be used or all the frame icons in the module. Dynamic loading is to obtain the icon resource file from the remote server when the page is running. Compared with static loading, dynamic loading can reduce package size. But generally our pages don’t use too many icons, just load the necessary icons in a static way.

        This article uses examples to introduce the method of statically loading system icons and three-party svg icons.

1. Load the frame icon

        Add the frame icon you want to use in 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 {
}

        Among them, AccountBookFill, AlertFill, AlertOutline can add the theme as the icon code according to the icon code marked in the official document.

        Official document address: Icon (Icon) | NG-ZORRO

        For example, the DownCircle icon in the figure below has corresponding icons for the three themes:

        If you want to use the Outlined style, the imported icon code is: DownCircleOutline

        If you want to use the Filled style, the imported icon code is: DownCircleFill

        If you want to use the Two Tone style, the imported icon code is: DownCircleTwoTone

2. Load three-party SVG

        Add an SVG icon by calling the framework method NzIconService.addIconLiteral():

    /**
     * Register an icon. Namespace is required.
     * @param type
     * @param literal
     */
    addIconLiteral(type: string, literal: string): void;

        The annotation requires that the type field must require a namespace.

1. Create a new file to save the icon svg that needs to be added:

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>`}
]

        In order to meet the method requirements, the type field must be in the format of "aa:bb", and the part before the colon will be recognized as a namespace.

        It should be noted that the fill color of the svg part needs to be changed to currentColor, otherwise the icon will not apply the color of the external style.

2. Write the startup service registration icon:

@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. Configure the startup service to the page startup item:

        Add the following code in 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 { }

        After completing the above steps, you can call the icon on the page according to the instructions in the official document:

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

        Code download: Angular, Ng-Zorro framework nz-icon statically loads third-party SVG icon sample source code-Typescript document class resource-CSDN download