# Icon 图标

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

# 平台差异说明

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

# 基本使用


提示

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


通过<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://cdn.uviewui.com/uview/example/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 (opens new window) String - -
label 图标右侧/下方的label文字 String - -
label-size label字体大小,单位rpx String | Number 28 -
label-color label字体颜色 String #606266 -
custom-prefix 自定义字体图标库时,需要写上此值,详见:扩展自定义图标库 (opens new window) 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 图标的样式,可以设置字体大小,颜色等,对象形式,sizecolor优先级高于此参数 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