基础组件 - Icon 图标 - 《uni-app UI 框架 uView 1.2.x 组件教程》

Icon 图标

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>

API

Props

参数	说明	类型	默认值	可选值
name	图标名称，见示例图标集	String	-	-
color	图标颜色	String	inherit	-
size	图标字体大小，单位rpx	String \| Number	32	-
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	-
margin-left	`label`在右方时与图标的距离，单位rpx	String \| Number	6	-
margin-top	`label`在下方时与图标的距离，单位rpx	String \| Number	6	-
label-pos	`label`相对于图标的位置	String	right	bottom

Events

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

图标集

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-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