Icon 图标，WLYY UI字体图标库，可扩展。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 name 属性设置展示对应的图标。

<wui-icon name="addfriends"></wui-icon>
<wui-icon name="addfriends-fill"></wui-icon>

/* 字节（头条）小程序组件内不能引入字体，需要在页面中条件编译引入 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: 'wuiFont';
	src: url("~@/components/wlyyui/wui-icon/wui-icon.ttf") format("truetype");
}
/* #endif */

修改大小

通过 size 属性修改图标大小，单位默认为rpx。

<wui-icon name="addfriends" :size="60"></wui-icon>
<wui-icon name="addfriends-fill" :size="60"></wui-icon>

修改颜色

通过 color 属性修改图标颜色。

<wui-icon name="addfriends" color="#465CFF"></wui-icon>
<wui-icon name="addfriends-fill" color="#465CFF"></wui-icon>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
name	String	图标名称	-	-
size	Number,String	图标大小	64	-
unit	String	图标大小单位	rpx	-
color	String	图标颜色	#333333	-
fontWeight	Number, String	图标字重	normal	-
disabled	Boolean	是否禁用点击	false	-
params	Number, String	自定义参数	0	-
customPrefix	String	自定义图标，定义字体class名称	-	-

Events

事件名	说明	回调参数
@click	点击图标时触发	{ params:自定义参数 }