# 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 | 图标的样式,可以设置字体大小,颜色等,对象形式,size 和color 优先级高于此参数 | 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