# Icon 图标

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

# 平台差异说明

App(vue) App(nvue) H5 小程序

# 基本使用


注意

因为在nvue下暂时无法解决自定义图标的问题,所以此功能暂缓推出。

icon下载地址


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

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

# 修改图标的样式

  • 通过color参数修改图标的颜色
  • 通过size参数修改图标的大小,单位为px
<zx-icon name="photo" color="#2979ff" size="28"></zx-icon>

# 图片图标

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

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

<zx-icon label="zxUI" size="40" name="/logo.png"></zx-icon>

# API

# Props

参数 说明 类型 默认值 可选值
name 图标名称,见示例图标集,如名称带有/,会被认为是图片图标 String - -
color 图标颜色 String color['zx-content-color'] -
size 图标字体大小,单位默认px String | Number 16px -
bold 是否显示粗体 Boolean false -
index 一个用于区分多个图标的值,点击图标时通过click事件传出 String | Number - -
hoverClass 图标按下去的样式类,用法同uni的view组件的hover-class参数 String - -
customPrefix(暂不可用) 自定义字体图标库时,需要写上此值 String uicon -
label 图标右侧/下方的label文字 String | Number - -
labelPos label相对于图标的位置 String right bottom / top / left
labelSize label字体大小,单位默认px String | Number 15px -
labelColor label字体颜色 String color['zx-content-color'] -
space label与图标的距离,单位默认px String | Number 3px -
imgMode 图片裁剪、缩放的模式,image组件原生属性,详见:image (opens new window) 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
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
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
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
share-square