Icon 图标
VEUI 的 Icon
组件通过直接封装 Vue-Awesome 实现,使用方法与 Vue-Awesome 相同。
示例
account-info
ad
airplay
alarm-clock
align-bottom
align-horizontally
align-left
align-right
align-text-both
align-text-both-r
align-text-bottom
align-text-bottom-r
align-text-center
align-text-center-r
align-text-left
align-text-left-r
align-text-middle
align-text-middle-r
align-text-right
align-text-right-r
align-text-top
align-text-top-r
align-top
align-vertically
anchor
android
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
apple-f
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-double-down
arrow-double-ld
arrow-double-left
arrow-double-lt
arrow-double-rd
arrow-double-right
arrow-double-rt
arrow-double-top
arrow-down
arrow-from-bottom
arrow-lb
arrow-left
arrow-lt
arrow-rb
arrow-right
arrow-rt
arrow-to-bottom
arrow-to-left
arrow-to-right
arrow-to-top
arrow-up
babybottle
baidu
ban
barcode-alt
barcode-scan
bars
baseball
basketball
basketball-clothes
battery-bolt
battery-empty
battery-full
battery-quarter
bedside
bell
bezier-curve
bicycle
bluetooth-b
book
book-2
book-alt
book-open
bookmark
bowl
box
bran-reputation
briefcase
briefcase-medical
bring-forward
bring-to-front
broadcast
browser
bug
building
bulleted-list
bulletin
bulletin-manage
bullseye
bus
calculator
calendar
camera
caret-square-right
cart-arrow-down
cart-arrow-up
cart-del
cart-full
cart-less
cart-plus
cast
chart-bar
chart-funnel
chart-gauge
chart-graph
chart-histogram
chart-line
chart-line-area
chart-map
chart-parallel
chart-pie
chart-radar
chart-ring
chart-scatter
chart-stock
chart-tree
check
check-circle
checkbox
checkbox-indeterminate
checkbox-uncheck
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
chrome
circle-3
circle-4
clean
clipboard
clock
cloud-atlas
cloudy
code
code-branch
code-merge
code-requests
cog
collapse
collected
command
comment-alt
comment-alt-dots
comments-alt
company
compress-alt
connection-arrow
connection-point
cooking-pot
copy
couch
coupon
credit-card
crop-alt
crosshairs
cut
data
data-all
data-null
data-one
data-three
data-two
database
desktop
devices
diagnosis
distribute-horizontally
distribute-vertically
document-file
document-folder
dot-circle
download
dynamics
edit
ellipsis-h
ellipsis-v
envelope
envelope-open
exchange
exchange-alt--circle
exclamation-circle
expand-alt
expansion
external-link
eye
eye-slash
fengchao
file-alt
film
filter
finance
financing
fireworks
flag
flashlight
flask
flip-horizontally
flip-vertically
fog
folder
folder-download
folder-plus
font
football
frown
game
gamepad
gavel
gem
ghost
gift
github
globe-stand
go-bottom
go-end
go-start
go-top
graduation-cap
grin
h1
h2
h3
hamburger
handheld
headset
heart
heavy-rain
hi
hi-f
history
home
hourglass
hourglass-half
hubspot
id-card
imac
image
inbox
inbox-in
inbox-out
inbox-success
infinity
info-circle
intelligence
joystick
keyboard
layers
layout
light-rain
lightning
liked
link
list-alt
list-audit
list-expense
list-frozen
list-log
list-vip
live
location-arrow
lock
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
magic
manage-ad
manage-advertising
manage-channel
manage-info
manage-keyword
manage-list
manage-order
manage-pic
manage-resource
manage-video
map
map-distance
map-marker-alt
map-pin
map-road
map-signs
mars
medal
microchip
microphone
minus
minus-circle
money-bill
monitor
monitor-heart-rate
moon
more-weixin
music
note
notebook
number-list
object-group
object-ungroup
order
order-sub
order-todown
orienteering
outdoor
pad
paper-plane
paperclip
parachute
pause
pause-circle
pause-square
people
people-more
people-three
people-two
phone
pic-show
pic-suggest
pie-eight
pie-five
pie-four
pie-one
pie-seven
pie-six
pie-three
pie-two
play
play-circle
plug
plus
plus-circle
plus-cross
poker
pound
power-off
ppt
print
profile
puzzle-piece
qq
qq-f
qrcode
question-circle
question-square
radar
radiation
radio
radio-uncheck
red-envelopes
redo-alt
repeat
repeat-1
report
report-basics
resource-lock
ring-3
ring-4
road
rocket
router
router-mi
rss
rugby-ball
safari
sandstorm
save
scan-code
schedule
screenshot
search
search-2
search-advertiser
search-minus
search-plus
search-words
selected
selected-focus
send-backward
sent-to-back
server
setting-3
setup-user
setup-words
shake
shangqiao
shangqiao-f
share-alt
share-circle
shield
shield-add
shield-check
shield-no
ship
shopping-bag
shopping-cart
sign-in
sign-out
signal
sim
skull
slide
sliders-v
snow
snowflake
sort
sort-down
sort-up
sound-market
speaker
spinner
star
stop-circle
stopwatch
sun
sunny
sync-alt
table
tag
tape
taxi
technology
terminal
text
text-bold
text-ltalic
text-underline
text-vertical
th-large
thermometer
thirtyjin
thumbs-down
thumbs-up
thunderstorm
times
times-circle
tool-center
top
trace
trash-alt
trend
trophy
truck
tshirt
tv-retro
umbrella
umbrella2
undo
unlike
unlink
unlock
upload
usb
user
user-circle
username
van
venus
vial
video
view-list-grid
vip
voice-message
voicemail
volume-down
volume-mute
volume-up
vr-glasses
wallet
water-rate
waterfalls-h
waterfalls-v
webcam
weibo
weixin
weixin-f
wifi
windmill
windows
write
yen-sign-circle
<template>
<article>
<div
v-for="icon in icons"
:key="icon"
class="item"
>
<div class="icon">
<veui-icon :name="icon"/>
</div>
<div class="name">
{{ icon }}
</div>
</div>
</article>
</template>
<script>
import { Icon } from 'veui'
import 'veui-theme-one-icons'
export default {
components: {
'veui-icon': Icon
},
data () {
return {
icons: Object.keys(Icon.icons).sort((a, b) => (a > b ? 1 : -1))
}
}
}
</script>
API
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
name | string | - | 图标名称。 |
label | string | - | 图标的文字说明,对辅助设备可见。当不设置时,图标对辅助设备隐藏。 |
scale | number | - | 图标尺寸倍数。不设置时相当于 1 。 |
spin | boolean | false | 是否保持旋转状态。 |
pulse | boolean | false | 是否保持步进旋转状态。 |
inverse | boolean | false | 是否翻转颜色(用白色绘制,用于深色背景)。 |
flip | string | - | 是否翻转,可选值为 'horizontal' /'vertical' ,分别表示水平翻转与垂直翻转。 |
spin
、pulse
属性会占用图标根元素的 CSS animation
属性,flip
则会占用其 transform
属性。如果需要设置其它 animation
或 transform
属性,请避免在这些属性同时使用 animation
/transform
以防止互相覆盖,需要对应效果时应自行提供完整的 animation
/transform
声明。
插槽
名称 | 描述 |
---|---|
default | 用来实现图标堆叠,当内部有 Icon 子组件时会层叠在一起居中显示,且外部 Icon 组件不需要设置 name 属性。 |