Icon 图标

约 830 字大约 3 分钟

2025-10-31

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

基本使用

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

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

修改图标的样式

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

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

图片图标

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

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

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

自定义图标

通过prefix设置iconfont图标类，通过name或者插槽传入Unicode字符即可显示图标。

由于Unicode字符不便于识别图标，所以新增了desc参数，用于描述图标，无实际功能作用，仅为了开发时快速识别图标。

注意：name 属性无需添加\u前缀，只能传入e606这样的字符。如果需要使用插槽，则需要添加\u前缀

<un-icon name="e606" desc="皮肤图标" prefix="custom-icon" size="24"></un-icon>

<un-icon prefix="custom-icon" size="24">{{'\ue606'}}</un-icon>

App.vue
@font-face {
  font-family: 'custom-icon';
  src: url("https://at.alicdn.com/t/c/font_4816151_kp3yd3ef5hh.ttf") format("truetype");
}

.custom-icon {
	font-family: "custom-icon" !important;
}

API

Props

参数	说明	类型	默认值
name	图标名称，见示例图标集，如名称带有`/`，会被认为是图片图标	String	-
desc	图标描述，无实际作用，仅用于便于阅读	String	-
color	图标颜色	String	-
size	图标字体大小，单位默认 px	String \| Number	16px
bold	是否显示粗体	Boolean	false
index	一个用于区分多个图标的值，点击图标时通过`click`事件传出	String \| Number	-
hoverClass	图标按下去的样式类，用法同 uni 的`view`组件的`hover-class`参数，详见：hover-class	String	-
prefix	自定义字体图标库时，需要写上此值	String	uicon
imgMode	图片裁剪、缩放的模式，image 组件原生属性，详见：image	String	-
width	`name`为图片路径时图片的宽度，单位默认 px	String \| Number	-
height	`name`为图片路径时图片的高度，单位默认 px	String \| Number	-
top	图标到顶部的距离，如果某些场景，如果图标没有垂直居中，可以调整此参数，单位默认 px	String \| Number	0
stop	是否阻止事件传播	Boolean	false

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

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

Css 变量

变量名	默认值	说明
--un-icon-text-font-size	$text-base	图标字体大小
--un-icon-text-line-height	$text-base	图标行高

提示

组件内部默认使用 css 变量，如需修改，请查看 css 变量使用文档