Icon图标
所有图标
共240个
基础图标
arrow
arrow-left
arrow-up
arrow-down
success
cross
plus
minus
fail
circle
线框风格
location-o
like-o
star-o
phone-o
setting-o
fire-o
coupon-o
cart-o
shopping-cart-o
cart-circle-o
friends-o
comment-o
gem-o
gift-o
point-gift-o
send-gift-o
service-o
bag-o
todo-list-o
balance-list-o
close
clock-o
question-o
passed
add-o
gold-coin-o
info-o
play-circle-o
pause-circle-o
stop-circle-o
warning-o
phone-circle-o
music-o
smile-o
thumb-circle-o
comment-circle-o
browsing-history-o
underway-o
more-o
video-o
shop-o
shop-collect-o
share-o
chat-o
smile-comment-o
vip-card-o
award-o
diamond-o
volume-o
cluster-o
wap-home-o
photo-o
gift-card-o
expand-o
medal-o
good-job-o
manager-o
label-o
bookmark-o
bill-o
hot-o
hot-sale-o
new-o
new-arrival-o
goods-collect-o
eye-o
delete-o
font-o
contact
notes-o
records
cash-back-record
newspaper-o
discount
completed
user-o
description
balance-o
refund-o
birthday-cake-o
orders-o
tv-o
envelop-o
flag-o
flower-o
filter-o
bar-chart-o
chart-trending-o
brush-o
apps-o
home-o
back-top
search
points
edit
qr
qr-invalid
closed-eye
down
scan
revoke
free-postage
certificate
logistics
after-sale
exchange
upgrade
ellipsis
sign
failure
ecard-pay
peer-pay
balance-pay
credit-pay
debit-pay
cash-on-deliver
other-pay
tosend
pending-payment
paid
aim
idcard
replay
shrink
shield-o
guide-o
cashier-o
实底风格
location
like
star
phone
setting
fire
coupon
cart
shopping-cart
cart-circle
friends
comment
gem
gift
point-gift
send-gift
service
bag
todo-list
balance-list
clear
clock
question
checked
add
gold-coin
info
play-circle
pause-circle
stop-circle
warning
phone-circle
music
smile
thumb-circle
comment-circle
browsing-history
underway
more
video
shop
shop-collect
share
chat
smile-comment
vip-card
award
diamond
volume
cluster
wap-home
photo
gift-card
expand
medal
good-job
manager
label
bookmark
bill
hot
hot-sale
new
new-arrival
goods-collect
eye
delete
font
wechat
wechat-pay
alipay
photograph
youzan-shield
umbrella-circle
bell
printer
map-marked
card
add-square
live
lock
audio
graphic
column
invitation
play
pause
stop
weapp-nav
ascending
descending
bars
wap-nav
enlarge
photo-fail
sort
按需引入
将components目录下easy-icon组件复制到你的项目conponents目录即可。
代码演示
基础用法
通过 name 属性来指定需要使用的图标，easyX 内置了一套图标库，可以直接传入对应的名称来使用。
<easy-icon name="edit" /><easy-icon name="edit" />图标颜色
通过 color 属性来设置图标的颜色。
<easy-icon name="edit" color="#1989fa" />
<easy-icon name="edit" color="#ee0a24" /><easy-icon name="edit" color="#1989fa" />
<easy-icon name="edit" color="#ee0a24" />图标大小
通过 size 属性来设置图标的尺寸大小，可以指定任意 CSS 单位。size属性默认为16px。
<!-- 不指定单位，默认使用 px -->
<easy-icon name="edit" size="40" />
<!-- 指定使用 rem 单位 -->
<easy-icon name="edit" size="3rem" />
<!-- 不指定单位，默认使用 px -->
<easy-icon name="edit" size="40" />
<!-- 指定使用 rem 单位 -->
<easy-icon name="edit" size="3rem" />API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名称或图片链接 | string | - |
| color | 图标颜色 | string | #000 |
| size | 图标大小，如 20px 2em，默认单位为 px | number | string | 32px |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击图标时触发 | event: MouseEvent |
说明
easyX使用的是开源项目Vant的图标库，在此感谢该项目及其开发者。Vant 的所有图标都托管在 iconfont.cn 上，点此查看：Vant 图标库。