Icon 图标 | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架

# Icon 图标

✈

组件名：uv-icon

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

# 平台兼容性

App（vue）	App（nvue）	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

# 基本使用

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

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

# 修改图标的样式

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

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

# 图片图标

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

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

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

# 自定义图标

详见：扩展自定义图标库

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Icon Props

参数	说明	类型	默认值	可选值
name	图标名称，若带有`/`或遵循`base64`图片格式，会被认为是图片图标	String	-	-
color	图标颜色，接受主题色eg: `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 (opens new window)	String	-	-
customPrefix	自定义字体图标库时，需要写上此值，详见：扩展自定义图标库，注意：nvue暂时不支持	String	uvicon	-
label	图标右侧 / 下方的label文字	String \| Number	-	-
labelPos	`label`相对于图标的位置	String	right	right \| bottom \| top \| left
labelSize	`label`字体大小，单位px	String \| Number	15px	-
labelColor	`label`字体颜色	String	#606266	-
space	`label`与图标的距离，单位`px(rpx)`	String \| Number	3px	-
imgMode	图片裁剪、缩放的模式，image组件原生属性，详见：image (opens new window)	String	-	-
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

woman

man

chat

chat-fill

red-packet

order

folder

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