Skip to content
NG-ZORRO Super SVG generator
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

NG-ZORRO Super SVG generator

NPM version Downloads MIT License

这是什么?

这个工具会尽可能从你的项目找到使用过的 Icon,然后帮你生成按需引入的文件。对于没有匹配到的(比如动态生成)图标,NG-ZORRO 会自动使用动态加载的方式请求。

为什么?

ng-zorro-antd@1.7.0 版本后,使用了 svg 图标替换了原先的 font 图标,从而带来了以下劣势(误):

  • 全量静态引入时带来包体积增加
  • 动态加载时会在没有缓存的情况下带来多余的请求(相比之前)

如何使用?

通过 npm 或者 yarn 安装。

$ npm i nz-ssvgg -g

在项目目录下运行

$ nz-ssvgg

或者指定项目根目录

$ nz-ssvgg hsuanlee/ng-project

如果一切正常你可以在你项目的下找到 src/ant-svg-icons.ts 文件,看起来像这样:

import {
    AndroidOutline,
    AppleOutline,
    NotificationOutline,
    PaperClipOutline,
...
 } from '@ant-design/icons-angular/icons';

export const ANT_ICONS = [
    AndroidOutline,
    AppleOutline,
    NotificationOutline,
    PaperClipOutline,
  ...
];

接下来按照官方文档添加图标即可,就像这样:

import { ANT_ICONS } from '../ant-svg-icons.ts';
import { NzIconService } from 'ng-zorro-antd';

export class AppComponent implements OnInit, AfterViewInit {
  constructor(private iconService: NzIconService) {
    // Import what you need.
    this.iconService.addIcon(...ANT_ICONS);
  }
}

以下情况无法匹配

<i nz-icon type="{{express}}" theme="{{express}}"></i>
<i class="anticon {{express}}"></i>
<i [attr.class]="express"></i>
<i [ngClass]="express"></i>

它是怎么工作的?

  1. 读取你项目的 angular.json 文件,找到默认项目
  2. 遍历项目文件进行匹配
  3. 生成按需导入文件夹
You can’t perform that action at this time.