Icon 图标

组件类型：WxIconComponentPublicInstance

基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用。

平台兼容性

Android uni-app-x	iOS uni-app-x	web	小程序
√	×	√	×

基本使用

通过 name 参数来指定使用的图标。

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

使用图标URL

可以直接在 name 属性中传入一个图片 URL 或 base64 来作为图标。

<wx-icon name="https://wxui.cn/logo.png"></wx-icon>

图标颜色

通过 color 属性来设置图标的颜色。

<wx-icon name="photo" color="#3c9cff"></wx-icon>

图标大小

通过 size 属性来设置图标的大小。

<wx-icon name="photo" :size="32"></wx-icon>

API

Props

名称	类型	默认值	描述
name	string	-	图标名称，若带有 / 或遵循 base64 图片格式，会被认为是图片图标，则文字图标相关属性会失效
color	string(string.ColorString)	#606266	图标颜色
size	number	16	图标大小
bold	boolean	false	是否显示粗体
index	number	-	点击图标的时候传递事件出去的index（用于区分点击了哪一个）
imgMode	string	#606266	图片的mode
width	string	#606266	图标为图片时的宽度
height	string	#606266	图标为图片时的高度
top	number	0	用于解决某些情况下，让图标垂直居中的用途
stop	boolean	false	是否阻止事件传播
customStyle	Array<any>	-	自定义样式
customClass	Array<any>	-	自定义class

Events

名称	类型	默认值	描述
@click	(index: number) => void	-	点击图标时触发

图标合集



level



download



search



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



star-half



share



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



tags



tags-fill



pause



pause-circle



pause-circle-fill



play-circle



play-circle-fill



map



map-fill



phone



phone-fill



list



list-dot



info-circle



info-circle-fill



minus



minus-circle



mic



mic-off



grid



grid-fill



eye



eye-fill



eye-off



eye-off-outline



file-text



file-text-fill



edit-pen



edit-pen-fill



email



email-fill



checkmark



checkmark-circle



checkmark-circle-fill



clock



clock-fill



close



close-circle



close-circle-fill



car



car-fill



bell



bell-fill



play-left



play-right



play-left-fill



play-right-fill



skip-back-left



skip-forward-right



setting



setting-fill



more-dot-fill



more-circle



more-circle-fill



arrow-upward



arrow-downward



arrow-leftward



arrow-rightward



arrow-up



arrow-down



arrow-left



arrow-right



thumb-up



thumb-up-fill



thumb-down



thumb-down-fill



coupon



coupon-fill



kefu-ermai



server-fill



server-man



warning



warning-fill



camera



camera-fill



pushpin



pushpin-fill



heart



heart-fill



account



account-fill



integral



integral-fill



gift



gift-fill



empty-data



empty-address



empty-favor



empty-car



empty-order



empty-list



empty-search



empty-permission



empty-news



empty-history



empty-coupon



empty-page



apple-fill



zhifubao-circle-fill



weixin-circle-fill



weixin-fill



qq-fill



qq-circle-fill



moments



moments-circel-fill



twitter



twitter-circle-fill



flash-lamp-open



flash-lamp-close