Icon 图标

基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义(包括nvue)文字与图片图标。

平台兼容性

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

基本使用

通过 <wu-icon> 形式来调用，设置 name 参数为图标名即可。其中 color 默认为 #606266，size默认为16px

vue

<wu-icon name="photo"></wu-icon>

<wu-icon name="photo"></wu-icon>

修改图标的样式

通过color参数修改图标的颜色
通过size参数修改图标的大小，单位为px

vue

<wu-icon name="photo" color="#2979ff" size="28"></wu-icon>

<wu-icon name="photo" color="#2979ff" size="28"></wu-icon>

图片图标

这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为 png 格式的正方形图标。

使用方法：给组件的 name 参数传入一个图片链接即可显示字体图标，链接规则是由 / 斜杠或 base64 图片地址，同时 size 参数也被设置为这个图片图标的宽度，由于是图片，如颜色 color 等参数都会失效。

vue

<!-- 在线地址 -->
<wu-icon size="40" name="https://via.placeholder.com/50x50.png/3c9cff/fff"></wu-icon>
<!-- base64地址图标，仅作演示 -->
<wu-icon size="40" name="data:image/png;base64,..."></wu-icon>

<!-- 在线地址 -->
<wu-icon size="40" name="https://via.placeholder.com/50x50.png/3c9cff/fff"></wu-icon>
<!-- base64地址图标，仅作演示 -->
<wu-icon size="40" name="data:image/png;base64,..."></wu-icon>

自定义图标

详见：自定义图标库

API

Icon Props

属性名	说明	类型	默认值	可选值
name	图标名称，若带有 `/` 或遵循 `base64` 图片格式，会被认为是图片图标，则文字图标相关属性会失效	String	-	-
color	图标颜色，可以接收主题色: color="primary"	String	#606266	-
size	图标字体大小，单位px(rpx)	String/Number	16px	-
bold	是否显示粗体	Boolean	false	true/false
index	一个用于区分多个图标的值，点击图标时通过 `click` 事件传出	String/Number	-	-
hoverClass	图标按下去的样式类，用法同uni的view组件的hover-class参数，详见：hover-class	String	-	-
customPrefix	自定义字体图标库时，需要写上此值，详见：自定义图标库	Boolean	false	true/false
label	图标的label文字	String/Number	-	-
labelPos	`label` 相对于图标的位置	String	right	top/bottom/left/right
labelSize	`label` 字体大小，单位px(rpx)	String/Number	15px	-
labelColor	`label` 字体颜色	String	#606266	-
space	`label` 与图标的距离，单位px(rpx)	String/Number	3px	-
imgMode	`image`组件的mode，详见：image	String/Number	3px	-
width	name为图片路径时图片的宽度，单位px(rpx)	String/Number	-	-
height	name为图片路径时图片的高度，单位px(rpx)	String/Number	-	-
top	图标在垂直方向上的定位用于解决某些情况下，让图标垂直居中的用途单位px(rpx)	String/Number	0	-
stop	是否阻止事件传播	Boolean	false	true/false

Icon Events

事件名	说明	回调参数
click	点击图标时触发	index: 通过 `props` 传递的 `index` 值

图标集合(点击图标即可获取图标代码)

level

download

reload

scan

calendar

bag

checkbox-mark

attach

wifi-off

woman

man

chat

chat-fill

red-packet

folder

order

arrow-up-fill

arrow-down-fill

backspace

photo

photo-fill

lock

lock-fill

lock-open

lock-opened-fill

home

home-fill

star

star-fill

share-fill

share-square

volume

volume-fill

volume-off

volume-off-fill

trash

trash-fill

shopping-cart

shopping-cart-fill

question-circle

question-circle-fill

plus

plus-circle

plus-circle-fill

Icon 图标 ​

平台兼容性 ​

基本使用 ​

修改图标的样式 ​

图片图标 ​

自定义图标 ​

API ​

Icon Props ​

Icon Events ​

图标集合(点击图标即可获取图标代码) ​