如何更好使用 ng-zorro-antd 图标
自 ng-zorro-antd 1.7.x 以后图标发生破坏性变更,虽然带了诸多优势,同时也带来几个劣势:
- 若采用动态加载会产生额外的HTTP请求
- 若静态加载需要逐一注册图标
st
组件的format
参数无法直接指定图标
ng-alain 默认使用静态加载的做法,毕竟后端使用图标相对于比较有限,即使将 svg 都打包进脚本相比较之前整个 styles 体积上是所有减少,但比较并不多。
而针对以上问题,ng-alain 提供几种方案。
使用icon插件(推荐)
尽可能从项目中分析并生成静态 Icon,插件会自动在 src
目录下生成两个文件:
src/style-icons.ts
自定义部分无法解析(例如:远程菜单图标)src/style-icons-auto.ts
命令自动生成文件
自动排除 ng-zorro-antd 和 @delon 已经加载的图标。
ng g ng-alain:plugin icon
同时,需要手动在 startup.service.ts
中导入:
import { ICONS_AUTO } from '../../../style-icons-auto';
import { ICONS } from '../../../style-icons';@Injectable()
export class StartupService {constructor(iconSrv: NzIconService) {iconSrv.addIcon(...ICONS_AUTO, ...ICONS);}
}
有效语法
<i class="anticon anticon-user"></i>
<i class="anticon anticon-question-circle-o"></i>
<i class="anticon anticon-spin anticon-loading"></i>
<i nz-icon class="anticon anticon-user"></i>
<i nz-icon type="align-{{type ? 'left' : 'right'}}"></i>
<i nz-icon [type]="type ? 'menu-fold' : 'menu-unfold'" [theme]="theme ? 'outline' : 'fill'"></i>
<i nz-icon [type]="type ? 'fullscreen' : 'fullscreen-exit'"></i>
<i nz-icon type="{{ type ? 'arrow-left' : 'arrow-right' }}"></i>
<i nz-icon type="filter" theme="outline"></i>
<nz-input-group [nzAddOnBeforeIcon]="focus ? 'anticon anticon-arrow-down' : 'anticon anticon-search'"></nz-input-group>
动态加载
动态加载,这是为了减少包体积而提供的方式。当 NG-ZORRO 检测用户想要渲染的图标还没有静态引入时,会发起 HTTP 请求动态引入。你只需要配置 angular.json
文件:
{"assets": [{"glob": "**/*","input": "./node_modules/@ant-design/icons-angular/src/inline-svg/","output": "/assets/"}]
}
动态使用
不管是静态或动态加载,依然无法解决原始方法 class="anticon anticon-"
的便利性,毕竟字符串就是字符串并非 Angular 模板无法被解析,而针对这个问题,提供两种解决办法。
类样式
事实上所有 Antd 图标都可以在 iconfont 找得到,可以点选自己需要的图标并生成相应的 css 文件或 cdn,最后在项目中可以直接使用 1.7.0
之前的写法。
注意: 在项目编辑里加上
anticon anticon-
前缀才能同之前的类名保持一致。
// angular.json
"styles": ["src/iconfont.css"
],
如果非cnd还需要将相应的 icon 图标文件复制到 assets
目录下,同时修改 iconfont.css
中 @font-face
对应的 url 路径。
@angular/elements
动态加载的另一种方式是使用 @angular/elements,只需要 nz-icon
指令重新封装成组件。
import { Component, Input } from '@angular/core';@Component({selector: 'nz-icon',template: `<i nz-icon [type]="type"></i>`,
})
export class IconComponent {@Input()type: string;
}
同时在根模块里注册它。
import { createCustomElement } from '@angular/elements';@NgModule({declarations: [],entryComponents: []
})
export class AppModule {constructor(injector: Injector) {customElements.define('nz-icon', createCustomElement(IconComponent, { injector }));}
}
最后。
@Component({selector: 'app-demo',template: `<div [innerHTML]="value"></div>`,
})
export class DemoComponent {constructor(private san: DomSanitizer) { }value = this.san.bypassSecurityTrustHtml(`icon: <nz-icon type="bell"></nz-icon>`,);
}
结论
本文只是针对这一次 ng-zorro-antd 图标上的变更做一个总结,就我个人而言还是比较推荐静态加载的方式,这无关乎包体大小的问题,而是更加明确我需要什么所以我应加载什么。
如何更好使用 ng-zorro-antd 图标相关推荐
- angular7中引用ng zorro antd的三种方式
在新版本的angular中使用新的ng zorro,按照官方文档一步一步来,没有报错,但是也没有反应. 试了一下官方的两种方式,第一种方式如果使用cnpm会报错,第二种方式会没有反应,也是因为使用了c ...
- React将字符串转化成组件,将Antd图标字符串转化为图标组件
React.createElement的作用是创建新的元素节点,也可以将字符串转换成元素节点 创建元素节点: //***********两种方案完全等价 //方案一 {React.createElem ...
- angular ng zorro框架日期框无法自适应宽度的解决方法
如果我们使用ng zorro框架的日期框时,就会发现,日期框的宽度总是固定的,无法像输入框一样自适应父节点<nz-form-control [nzSpan]="12"> ...
- NG ZORRO知识点总结
NG ZORRO的常用属性,包括但不限于,结合代码 <button nz-button [nzType]="'primary'" [nzSize]="'large' ...
- Ng Zorro配置
Ng Zorro配置 文章目录 Ng Zorro配置 一.app.module里配置 二.引入样式 1.使用全部组件样式 2.引入组件模块 全局安装:npm i ng-zorro-antd g --s ...
- ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件 在layout.module.ts ...
- angular项目 集成ng zorro 和ng alain
angular项目 集成 ng zorro和ng alain(mock 和acl权限)学习笔记 这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
- ng zorro input readonly 的使用
网上找了好久才找到的方法, 方法一(在构造方法里做): js: isDisabled = true validateForm: FormGroup; constructor( priva ...
- 【Markdown语法高级】 让你的博客更精彩(三:常用图标模板)
最新文章
- torch.full()简介
- PetShop 4.0讨论专贴(QA)
- 使用MyEclipse创建可执行jar
- 计算机速录学什么,学速录的要求有哪些
- C语言通过函数参数不能带出动态内存的例子。
- 快速排序时间复杂度为O(n×log(n))的证明
- innodb_flush_log_at_trx_commit配置
- 第4章 maven依赖特性
- 如何在邮件系统中使用自己的域名?
- myeclipse链接数据库,SQL语句实现增删改查
- Python计算组合数生成杨辉三角形
- 5 Tips for creating good code every day; or how to become a good software developer
- 一个迷你Excel查看编辑器,仅3.4M大小
- setBackgroundResource()与setImageBitmap()以及setBackground()的使用
- Django项目部署至华为云服务器
- C# vb .net实现淡色效果滤镜
- ICT案例——园区网配置
- DDR3 CONTROLLER-PHY物理层
- 电路中的电流采样IC选型
- 【如何3秒钟看出一个人的python实力|Python 数据分析打怪升级之路 day04】:手把手教你如何分析用户数据、数据分析基本概念