无法渲染某些 NG-ZORRO 图标

Posted 2023-03-07

【中文标题】无法渲染某些 NG-ZORRO 图标

【英文标题】：Can't render some NG-ZORRO icon

【发布时间】：2021-10-01 18:15:29

【问题描述】：

如标题所述，NG-ZORRO的部分图标无法渲染。

预计要渲染 5 个图标，但只渲染了 2 个。

为输出附加视图

main.component.html

<nz-layout class="full-screen">
    <nz-sider nzCollapsible
              [(nzCollapsed)]="isCollapsed"
              [nzWidth]="260">
        <app-left-control></app-left-control>
    </nz-sider>
    <nz-content class="container">
        <i nz-icon nzType="step-backward" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="down" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="caret-left" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="double-right" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="setting" nzTheme="outline"></i> Cannot render<br>
    </nz-content>
</nz-layout>

main.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  MainComponent  from './main.component';

import  MainRoutingModule  from './main-routing.module';
import  NzLayoutModule  from 'ng-zorro-antd/layout';
import  NzButtonModule  from 'ng-zorro-antd/button';
import  NzIconModule  from 'ng-zorro-antd/icon';

import  LeftControlComponent  from './left-control/left-control.component';

@NgModule(
  declarations: [
    MainComponent,
    LeftControlComponent
  ],
  imports: [
    CommonModule,
    MainRoutingModule,
    NzLayoutModule,
    NzButtonModule,
    NzIconModule,
  ]
)
export class MainModule  

输出

【参考方案1】：

根据NG-ZORRO Static loading and dynamic loading，您应该按照以下步骤显示那些丢失的图标。

先决条件：

npm install @ant-design/icons-angular

第一步：通过angular.json动态导入

angular.json

  "assets": [
    
      "glob": "**/*",
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    
  ]

第二步：在延迟加载的模块中添加图标

main.module.ts

import 
  StepBackwardOutline,
  CaretLeftOutline,
  SettingOutline
 from '@ant-design/icons-angular/icons';

const icons: IconDefinition[] = [
  StepBackwardOutline,
  CaretLeftOutline,
  SettingOutline
];

export class MainModule 
  ...
  imports: [
    NzIconModule.forChild(icons),
  ]

注意：

如何知道要导入的图标对应的模块？

大写骆驼案类型&主题，即alibaba => AlibabaOutline。

Sample solution on StackBlitz

---

为帖子所有者的评论更新

DownOutline和DoubleRightOutline这两个图标不需要导入，因为这两个图标已经被default导入了。

---

参考文献

ERROR Error: [@ant-design/icons-angular]: the icon arrow-left-o does not exist or is not registered. Add Icons in Lazy-loaded Modules How do I know a icon's corresponding module to import?

【讨论】：

很有帮助，请问为什么渲染成功的两个图标不需要导入？

更新您的评论。不需要这两个图标的原因导入为DownOutline & DoubleRightOutline are imported by default。如果这对您有帮助，您可以投票/标记为正确答案。谢谢。