【Icon图标】
基本使用:
使用<i nz-icon></i>标签声明组件,指定图标对应的nzType属性.可以通过nzTheme属性来设置不同的主题风格的图标,也可以通过设置nzSpin属性来实现动画旋转效果。对旧的API<i class=”antion”></i>兼容
首先这个图标很有意思它有几个基本的API接口,可以通过他们来运用不同的图标
[nzType] 这个是图标的类型,一般遵循图标的命名规范eg:眼睛就是[nzType]=”’eye’”
[nzTheme] 图标主题风格,可选实心、描线、双色’fill’|’outline’|’towtone’ eg:[nzTheme]=”’fill’”这个就会把图标全部填满
[nzSpin] 是否有旋转动画 eg:[nzSpin]=”’true’”
[nzTwotoneColor] 仅适用双色图标,设置双色图标的主要颜色默认蓝色 eg:[nzTwotoneColor]=”’#ff00ff’” 显示紫色。
[nzIconfont] 指定来自IconFont的图标类型

如果要使用Iconfont.cn [nzIconfont]需要导入一个包import { NzIconService } from 'ng-zorro-antd/icon';
然后出口是
constructor(private iconService: NzIconService)
{
this.iconService.fetchFromIconfont({
scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
});
}
自定义图标:
需要你将svg标签直接放在nz-icon中渲染自定义内容
本文详细介绍了AntDesign图标组件的基本用法及高级特性,包括如何使用[nzType]指定图标类型,通过[nzTheme]设置图标主题风格,利用[nzSpin]实现动画效果等。此外还介绍了如何引入IconFont图标及自定义SVG图标的方法。
489

被折叠的 条评论
为什么被折叠?



