Sun uni

Icon 图标

基于字体的图标集，包含了大多数常见场景的图标。

平台差异说明

App(vue)	App(nvue)	H5	微信小程序
√	√	√	√

基本使用

提示

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

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

html

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

修改图标的样式

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

html

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

图片图标

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

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

html

<su-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></su-icon>

自定义图标

custom-prefix 自定义iconfont图标

html

<su-icon custom-prefix="ylwicon" name="huoche" />

示例源码

点击可以查看右侧演示页面的源码

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	`label`在上方时与图标的距离，单位rpx	String \| Number	6	-
margin-right	`label`在左侧时与图标的距离，单位rpx	String \| Number	6	-
label-pos	`label`相对于图标的位置(left和top为1.4.1新增)	String	right	bottom / top / left
custom-style	图标的样式，可以设置字体大小，颜色等，对象形式，`size`和`color`优先级高于此参数	Object	-	-
width	`name`为图片路径时图片的宽度，单位任意，数值默认为rpx单位	String \| Number	-	-
height	`name`为图片路径时图片的高度，单位任意，数值默认为rpx单位	String \| Number	-	-
top	如果某些场景，如果图标没有垂直居中，可以调整此参数，单位任意，数值默认为rpx单位	String \| Number	0	-
show-decimal-icon	是否为DecimalIcon	Boolean	false	true
inactive-color	背景颜色，可接受主题色，仅Decimal时有效	String	#ececec	-
percent	显示的百分比，仅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-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

Icon 图标 ​

平台差异说明 ​

基本使用 ​

修改图标的样式 ​

图片图标 ​

自定义图标 ​

示例源码 ​

API ​

Props ​

Events ​

图标集 ​

Icon 图标

平台差异说明

基本使用

修改图标的样式

图片图标

自定义图标

示例源码

API

Props

Events

图标集