Question

Icon 图标 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

提示

如果您觉得内置的图标数量不够，或者不合符您的需求，别担心，我们还精心为您准备了一份简单易用的扩展自定义图标库教程：扩展自定义图标库

通过<u-icon>形式来调用，设置name参数为图标名即可

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

修改图标的样式

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

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

图片图标 1.3.0

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

上面说到，给组件的name参数传入一个图片的名称即可显示字体图标，这些名称中不能带有/斜杠符号，否则会被认为是传入了图片图标，同时，size参数 也被设置为这个图片图标的宽度，由于是图片，诸如颜色color等参数都会失效。

<u-icon label="uView" size="40" name="https://www.wenjiangs.com/wp-content/uploads/2021/docimg5/button.png"></u-icon>

API

Props

参数	说明	类型	默认值	可选值
name	图标名称，见示例图标集，如名称带有/，会被认为是图片图标	String	-	-
color	图标颜色	String	inherit	-
size	图标字体大小，单位rpx	String | Number	inherit	-
index	一个用于区分多个图标的值，点击图标时通过click事件传出	String	-	-
hover-class	图标按下去的样式类，用法同uni的view组件的hover-class参数，详见：hover-class	String	-	-
label	图标右侧/下方的label文字	String	-	-
label-size	label字体大小，单位rpx	String | Number	28	-
label-color	label字体颜色	String	#606266	-
custom-prefix	自定义字体图标库时，需要写上此值，详见：扩展自定义图标库	String	uicon	-
margin-left	label在右方时与图标的距离，单位rpx	String | Number	6	-
margin-top	label在下方时与图标的距离，单位rpx	String | Number	6	-
margin-bottom 1.4.1	label在上方时与图标的距离，单位rpx	String | Number	6	-
margin-right 1.4.1	label在左侧时与图标的距离，单位rpx	String | Number	6	-
label-pos	label相对于图标的位置(left和top为1.4.1新增)	String	right	bottom / top / left
custom-style 1.3.0	图标的样式，可以设置字体大小，颜色等，对象形式，size和color优先级高于此参数	Object	-	-
width 1.5.6	name为图片路径时图片的宽度，单位任意，数值默认为rpx单位	String | Number	-	-
height 1.5.6	name为图片路径时图片的高度，单位任意，数值默认为rpx单位	String | Number	-	-
top 1.5.6	如果某些场景，如果图标没有垂直居中，可以调整此参数，单位任意，数值默认为rpx单位	String | Number	0	-
show-decimal-icon 1.7.2	是否为DecimalIcon	Boolean	false	true
inactive-color 1.7.2	背景颜色，可接受主题色，仅Decimal时有效	String	#ececec	-
percent 1.7.2	显示的百分比，仅Decimal时有效	String | Number	50	-

Events

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

图标集

level woman man arrow-left-double arrow-right-double chat chat-fill red-packet red-packet-fill order checkbox-mark arrow-up-fill arrow-down-fill backspace photo photo-fill lock lock-fill lock-open lock-opened-fill hourglass hourglass-half-fill home home-fill fingerprint cut star star-fill share share-fill volume-up volume-up-fill volume-off volume-off-fill trash trash-fill rewind-right rewind-right-fill rewind-left rewind-left-fill shopping-cart shopping-cart-fill question 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 man-delete man-add man-add-fill person-delete-fill info info-circle info-circle-fill minus minus-circle minus-circle-fill mic mic-off grid grid-fill eye eye-fill eye-off file-text file-text-fill edit-pen edit-pen-fill email email-fill download checkmark checkmark-circle checkmark-circle-fill clock clock-fill close close-circle close-circle-fill calendar calendar-fill car car-fill bell bell-fill bookmark bookmark-fill attach play-right play-right-fill play-left play-left-fill error error-circle error-circle-fill wifi wifi-off skip-back-left skip-forward-right search setting setting-fill volume volume-fill more-dot-fill more-circle more-circle-fill bag bag-fill arrow-upward arrow-downward arrow-leftward arrow-rightward arrow-up arrow-down arrow-left arrow-right rmb rmb-circle rmb-circle-fill thumb-up thumb-up-fill thumb-down thumb-down-fill coupon coupon-fill kefu-ermai server-fill server-man scan warning warning-fill google google-circle-fill chrome-circle-fill ie IE-circle-fill github-circle-fill android-fill android-circle-fill apple-fill camera camera-fill pushpin pushpin-fill minus-square-fill plus-square-fill heart heart-fill reload account account-fill minus-people-fill plus-people-fill integral integral-fill zhihu zhihu-circle-fill gift gift-fill zhifubao zhifubao-circle-fill weixin-fill weixin-circle-fill twitter twitter-circle-fill taobao taobao-circle-fill weibo weibo-circle-fill qq-fill qq-circle-fill moments moments-circel-fill qzone qzone-circle-fill facebook facebook-circle-fill baidu baidu-circle-fill zhuanfa