Icon 图标

示例

ab-test
abstract
academic-cap
ad-delivery-circle-solid
align-bottom
align-center
align-left
align-right
align-top
anticlockwise
apps
apps-settings
apps-settings-solid
apps-solid
arrow-curve-down-right-solid
arrow-curve-up-right-solid
arrow-down
arrow-down-solid
arrow-left
arrow-left-solid
arrow-right
arrow-right-solid
arrow-to-bottom
arrow-to-top
arrow-to-top-soild
arrow-up
arrow-up-solid
asterisk
attribute
audio
audio-solid
baby-bottle
background
bar-chart
bar-chart-alt
bar-chart-square
bell
bell-solid
bold
book
book-bookmark
book-bookmark-solid
bookmark
bookmark-solid
books-bookmark
box
box-solid
building
bulb
bulb-dash
bulb-solid
bullseye
bullseye-hit
calendar
calendar-cny
calendar-heart
calendar-solid
camera
camera-add
camera-solid
car
caret-down
caret-left
caret-right
caret-up
cellphone
cellphone-solid
chat
chat-solid
check
check-circle
check-circle-solid
check-desktop
check-square
check-square-solid
chevron-double-down
chevron-double-left
chevron-double-right
chevron-double-up
chevron-down
chevron-left
chevron-right
chevron-right-circle
chevron-right-circle-solid
chevron-up
circle-extend
clock
clock-solid
clockwise
cloud-upload-solid
cny-circle
cny-circle-solid
cny-refund
cny-wallet
coin
coin-solid
color-palette
compass
compass-solid
component
copy
coupon-minus
coupon-percent
crop
crown
cube
cube-eye
cube-solid
curve-square
customer
customer-service
customer-settings
cut
data
data-market
database
desktop
desktop-solid
detail-list
diamond
dollar-circle
double-circle
download
drag-indicator
edit
element
ellipsis
ellipsis-circle
ellipsis-circle-solid
ellipsis-vertical
english-comment
envelope
envelope-open
envelope-open-solid
envelope-solid
exclamation-circle
exclamation-circle-solid
exclamation-triangle
exclamation-triangle-solid
expand
expand-square
external-link
eye
eye-bright
eye-slash
eye-slash-solid
eye-tracking
eye-tracking-solid
eyedropper
feed
feedback-solid
file
file-add
file-add-solid
file-edit
file-error
file-solid
film
filter
filter-solid
flag
folder
folder-download
folder-open
folder-open-solid
folder-solid
font
font-size
four-dots
four-quarter-circles
full-circle
full-circle-solid
gamepad
gateway
gift
gift-solid
girl
grade-circle
grade-circle-solid
hamburger
headphones
headphones-solid
heart
heart-cancel
heart-cancel-solid
heart-solid
hierarchy
high-square
high-square-solid
home
home-solid
hospital
house
id-card
id-card-back
id-card-back-solid
id-card-solid
image
image-add
image-solid
import
indent
info-circle
info-circle-solid
infoflow
intelligence
invoice
italic
landing-page-solid
layer
layout
letter-spacing
line-chart
line-chart-alt
line-height
link
link-alt
link-alt-solid
list-checked
list-ordered
list-unordered
loading
location
location-copy
location-pin
location-solid
lock
lock-solid
long-video
low-square
low-square-solid
magic-wand
magic-wand-solid
market
media-add
medium-square
medium-square-solid
migrate
mini-app-baidu
mini-app-baidu-solid
minimize
minus
minus-circle
minus-circle-solid
mobile-app
motion-graphics
move
music
music-solid
mute
mute-solid
one-compare
one-repl-expand
one-repl-shrink
one-to-one
order
order-solid
outdent
outstanding
paint-bucket
paper-clip
paper-plane
paper-plane-solid
paste
path
pause
pause-circle
pause-circle-solid
pencil
pencil-solid
phone
phone-call
phone-eye
pie-chart
pie-chart-solid
play
play-circle
play-circle-solid
plus
plus-circle
plus-circle-solid
plus-square
plus-square-solid
power-off
puzzle-piece
puzzle-piece-solid
pv-shield
qrcode
quality-circle
quality-circle-solid
question-circle
question-circle-solid
question-comment
question-comment-solid
recommend-square
recommend-square-solid
recommendation
redo
report
report-bookmark
report-check
report-search
report-settings
report-stamp
report-star
report-trend-settings
report-user
road
rocket-solid
rotate-anticlockwise
rotate-clockwise
save
save-solid
scan
search
search-desktop
search-history
search-solid
settings
settings-solid
share
share-alt
share-alt-solid
shield-check
shield-user
shield-wave-solid
shopping-bag
shopping-bag-solid
shopping-cart
short-video
shrink
sign-out
sliders-square
smiley
smiley-solid
sort
sort-alt
sort-asc
sort-desc
square-rotation
stamp
star
star-dash
star-dash-soild
star-half
star-solid
stop
stop-solid
strikethrough
sync
tag
tag-solid
team
team-solid
telephone
telephone-solid
template
text-square
text-square-solid
thumb-down
thumb-down-solid
thumb-up
thumb-up-solid
times
times-circle
times-circle-solid
toolbox
toolbox-solid
trash
trash-solid
treasure-chest
treasure-chest-solid
trend-desktop
trend-monitor
trend-pages
trend-report
trophy
trophy-solid
truck
truck-solid
tv
two-hearts
underline
undo
unlink
unlock
unlock-solid
upgrade
upgrade-solid
upload
upload-desktop
user
user-bookmark
user-bookmark-solid
user-card
user-circle
user-circle-solid
user-combined
user-filter
user-intersection
user-label
user-mobile
user-search
user-settings
user-solid
user-sync
user-tieba
video
video-add
video-crop
video-film
video-film-solid
video-history
video-solid
volume
volume-solid
whirlpool
yingxiaotong
zoom-in
zoom-out
在 GitHub 上编辑此示例编辑
<template>
<article>
  <div
    v-for="name in names"
    :key="name"
    class="item"
  >
    <div class="icon">
      <veui-icon :name="name"/>
    </div>
    <div class="name">
      {{ name }}
    </div>
  </div>
</article>
</template>

<script>
import { Icon } from 'veui'
import 'veui-theme-dls-icons'

export default {
  components: {
    'veui-icon': Icon
  },
  data () {
    return {
      names: Object.keys(Icon.icons)
        .filter(name => !name.startsWith('one-demo-') && Icon.icons[name])
        .sort()
    }
  }
}
</script>

<style lang="less" scoped>
article {
  overflow: hidden;
}

.item {
  @grid-size: 120px;
  float: left;
  width: @grid-size;
  height: calc(@grid-size + 3em);
  text-align: center;
  margin: 1em 2em;

  .icon {
    width: @grid-size;
    height: @grid-size;
    border: 1px solid transparent;
    font-size: 1.5em;
    line-height: @grid-size;
    border-radius: 4px;
    transition: border-color 0.2s;

    &:hover {
      border-color: #ccc;
    }
  }

  .name {
    margin-top: 0.6em;
    color: #333;
    font-size: 0.8em;
    white-space: nowrap;
  }
}
</style>

API

属性

名称类型默认值描述
namestring | Object-图标名称或其组件定义。
labelstring-图标的文字说明,对辅助设备可见。当不设置时,图标对辅助设备隐藏。
spinbooleanfalse是否保持旋转状态。

插槽

名称描述
default用来实现图标堆叠,当内部有 Icon 子组件时会层叠在一起居中显示,且外部 Icon 组件不需要设置 name 属性。
在 GitHub 上编辑此页面编辑