图标 Icon
在页面上展示图标。
IconApron 是 Apron Design 的分支组件包（当前版本为：2.3.1），拥有独立设计并整理的图标库。
使用图标组件，你需要额外安装 @icon-apron/vue-next 组件包。
bash
# npm
npm install @icon-apron/vue-next --save-dev
# yarn
yarn add -D @icon-apron/vue-next
# pnpm
pnpm install @icon-apron/vue-next --save-dev基本用法
在 2.0.0-develop 版本（包含）及以前的各个版本，你都需要全部引用：
typescript
// main.ts
import IconApron from '@icon-apron/vue-next'
app.use(IconApron)当使用全部引用时，图标以文字的形式展现在容器里，因此你可以对其设置字号、颜色等。
<template>
<ap-space class="demo">
<ap-icon :size="24" />
<ap-icon name="face" :size="24" />
<ap-icon name="star-full" :size="24" color="gold" />
<ap-icon name="global" :size="24" color="var(--color-success)" />
</ap-space>
</template>图标列表
图标将会逐步更新。
通用图标
通用图标表示可以应用在各种场景下的图标。
星（满）
star-full
星（半）
star-half
星（空心）
star-empty
睁眼
eye-open
闭眼
eye-close
看不见
eye-invisible
心（满）
heart-full
心（半）
heart-half
心（空心）
heart-empty
国际
global
更多
more
当前
current
脸
face
微笑脸
face-smile
难过脸
face-sad
无语脸
face-speachless
归档
archive
空
empty
脸
face-filled
微笑脸
face-smile-filled
难过脸
face-sad-filled
无语脸
face-speachless-filled
清空
clear
完成
finish
身份证
id-card
通行证
pass-id
护照
passport
菜单
grid
菜单
apps
菜单
burger
设置
setting
下载
download
上传
upload
加载中
spinning
加载中
ringing
加载中
loading
客服
customer-service
导入
import
导出
export
搜索
search
放大
zoom-in
缩小
zoom-out
男性
male
女性
female
版权
copyright
注册商标
trademark
太阳
sun
月亮
moon
数学
各种数学运算
加
plus
减
minus
乘
times
除
division
百分号
percent
计算
calculate
方向
各种方向的指示图标
上
up
右
right
下
down
左
left
上
double-up
右
double-right
下
double-down
左
double-left
上
arrow-up
右
arrow-right
下
arrow-down
左
arrow-left
上
caret-up
右
caret-right
下
caret-down
左
caret-left
上
circle-up
右
circle-right
下
circle-down
左
circle-left
提示
用户各种提示场景的图标
消息
info
成功
success
警告
warning
错误
error
问题
question
消息
info-circle
成功
success-circle
警告
warning-circle
错误
error-circle
问题
question-circle
消息
info-filled
成功
success-filled
警告
warning-filled
错误
error-filled
问题
question-filled
电商
与电商场景相关的图标
优惠券
coupon
积分/金币
coin
购物车
cart
钱包
wallet
印章
stamp
日期
date
时间
time
计时器
timer
标签
tag
火
flame
社交
社交场景会使用到的图标
分享
share
旗子
flag
消息
message
想法
idea
鼠标
mouse
键盘
keyboard
邮件
mail
电源开关
power
目标
aim
奖杯
trophy
奖牌
medal
徽章
award
发现
discover
定位
position
地图
map
钥匙
key
锁
lock
锁（开）
lock-open
二维码
qr
支付二维码
pay-qr
条形码
barcode
扫描
scan
门票
ticket
复制
copy
交通
交通场景或交通工具的指示图标
交通信号灯
traffic-light
地铁
subway
飞机
aircraft
无人机
drone
街
street
路
road
公交车
bus
云轨列车
skyrail
出发
departure
到达
arrival
后台
用于用户后台面板的一些常见图标，但不代表仅能在后台管理面板使用。
创建
create
编辑
edit
删除
delete
回形针
paperclip
人
person
USB
usb
仪表盘
dashboard
仪表盘
dashpad
统计
statistics
打印
print
运动
运动类相关图标
篮球
basketball
足球
soccer
排球
volleyball
乒乓球
ping-pong
羽毛球
badminton
网球
tennis
台球
billiards
轮滑
roller-skating
滑板
skating-board
暴走鞋
heelys
健身
body-building
奥运
olympic
RnD
研发场景使用的图标
Git
git
分支
branch
提交
commit
合并
merge
PR
pull-request
层/图层
layers
苹果应用商店
appstore
谷歌应用商店
googleplay
缺陷
bug
缓冲
buffer
指南
guide
数据库
database
代码
code
同步
sync
Command
command
Opt
option
文件
各种文件类型、文件夹的图标
文件夹
folder
文件
file
Word 文档
file-doc
PPT 演示文稿
file-ppt
Excel 电子表格
file-xls
pages 文档
file-pages
keynote 演示文稿
file-keys
numbers 电子表格
file-numbers
文本文件
file-txt
Markdown
file-md
PDF 文件
file-pdf
视频文件
file-video
音频文件
file-audio
Midi 文件
file-midi
乐谱文件
file-score
图片文件
file-image
音乐文件
file-music
压缩文件
file-compressed
配置文件
file-config
硬件
硬件研发场景使用或相关的技术图标。
无线
wifi
无线（未链接）
wifi-disconnected
蓝牙
bluetooth
蓝牙（未链接）
bluetooth-disconnected
指纹
finger-print
广播
boardcast
终端
terminal
电池-空
battery-empty
电池-低
battery-low
电池-中
battery-mid
电池-满
battery-full
电池-充电
battery-charging
服务器
server
桌面电脑
computer
笔记本电脑
laptop
平板电脑
tablet
手机
cellphone
电话
phone
USB
usb
TYPE-C
usb-c
OTG
otg
Lightning
lightning
品牌
各种品牌的集合
苹果
apple
安卓
android
电报
telegram
谷歌
google
Facebook
facebook
推特
twitter
微博
weibo
微信
wechat
QQ
qq
Instagram
instagram
抖音
tiktok
小红书
redbook
Hangouts
hangouts
小米
mi
迪士尼
disney
Skype
skype
淘宝
taobao
亚马逊
amazon
易贝
ebay
达芬奇
davinci-latex
FunPlus
funplus
Airbnb
airbnb
比特币
bitcoin
CodeOpen
codeopen
Behance
behance
Pinterest
pinterest
Steam
steam
PlayStation
playstation
任天堂 Switch
nintendo-switch
Confluence
confluence
YouTube
youtube
ApronDesign
apron-design
飞书
lark
Slack
slack
Figma
figma
Chrome
chrome
Safari
safari
Github
github
Taro
taro
Vue
vue
React
react
达芬奇｜面具
davinci-mask
Musescore
musescore
Epic
epic
X
twitter-x
黑米说
mitkimi
黑米说音乐厅
music-mitkimi
音乐
与音乐相关的图标
G 谱号
g-clef
F 谱号
f-clef
C 谱号
c-clef
高音谱号
treble-clef
低音谱号
bass-clef
中音谱号
alto-clef
键盘乐器
clavier
管风琴
organ
钢琴
piano
电子琴
electronic-organ
双排键
electone
吉他
guitar
媒体
与媒体播放相关的图标
播放
play
暂停
pause
上一曲
prev
下一曲
next
快退
fast-rewind
快进
fast-forward
停止
stop
全屏
fullscreen
音量-0
volume-0
音量-1
volume-1
音量-2
volume-2
音量-静音
volume-mute
音量-
volume-decrease
音量+
volume-increase
视频
video
视频（加载失败）
video-load-failed
图片
image
图片（加载失败）
image-load-failed
音乐
music
音频
audio
麦克风
mic
直播
live-stream
录制
record
停止录制
stop-record
支付
与全球支付相关的各种图标
微信支付
wechat-pay
支付宝
alipay
PayPal
paypal
中国银联
union-pay
美国运通
american-express
万事达
mastercard
VISA
visa
JCB
jcb
Apple Pay
apple-pay
Google Pay
google-pay
人民币
rmb
美元
usd
欧元
eur
英镑
gpb
日元
jpy
现金
cash
API
<icon> Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 |
|---|---|---|---|---|---|
| name | 图标名称 | String | - | apron-design | - |
| size | 图标尺寸 | Number | - | 16 | - |
| color | 图标颜色 | String | - | #000000 | 使用 HEX、RGB 等 |