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