npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

nz-ssvgg

0.0.4 • Public • Published

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. 生成按需导入文件夹

install

npm i nz-ssvgg

Downloadsweekly downloads

8

version

0.0.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability