Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including nz-ssvgg with all npm packages installed. Try it out:

var nzSsvgg = require("nz-ssvgg")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

nz-ssvgg v0.0.4

NG-ZORRO Super SVG generator

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. 生成按需导入文件夹
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free