Icon 图标

示例

abstract
align-center
align-left
align-right
anticlockwise
apps
apps-settings
arrow-down
arrow-left
arrow-right
arrow-to-bottom
arrow-to-top
arrow-up
asterisk
attribute
audio
background
bar-chart
bar-chart-alt
bell
bold
book
bookmark
books-bookmark
bullseye
bullseye-hit
calendar
camera
caret-down
caret-left
caret-right
caret-up
cellphone
chat
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
clockwise
cny-circle
coin
color-palette
compass
component
copy
crop
cut
data
data-market
database
desktop
double-circle
download
edit
element
ellipsis
ellipsis-circle
ellipsis-vertical
envelope
exclamation-circle
exclamation-circle-solid
expand
expand-square
external-link
eye
eye-bright
eye-slash
feed
file
file-add
file-edit
file-error
filter
filter-solid
flag
folder
folder-open
gateway
gift
hamburger
headphones
heart
heart-cancel
heart-solid
hierarchy
home
id-card
id-card-back
image
image-add
indent
info-circle
info-circle-solid
intelligence
italic
layer
line-chart
link
link-alt
loading
location
location-copy
lock
long-video
market
media-add
mini-app-baidu
minimize
minus
minus-circle
mobile-app
motion-graphics
move
music
mute
one-to-one
order
outdent
outstanding
paper-clip
paper-plane
pause
pause-circle
pencil
play
play-circle
plus
plus-circle
plus-square
plus-square-solid
power-off
puzzle-piece
pv-shield
qrcode
question-circle
question-circle-solid
question-comment
recommendation
redo
report
report-check
road
save
scan
search
search-desktop
search-history
settings
share
shopping-bag
short-video
shrink
sign-out
sliders-square
sort
sort-alt
sort-asc
sort-desc
square-rotation
star
star-solid
stop
strikethrough
sync
tag
telephone
template
text-square
thumb-down
thumb-down-solid
thumb-up
thumb-up-solid
times
times-circle
times-circle-solid
toolbox
trash
trend-desktop
trend-monitor
trend-pages
underline
undo
unlock
upload
upload-desktop
user
user-bookmark
user-circle
user-combined
user-filter
user-intersection
user-label
user-mobile
user-search
user-sync
user-tieba
video
video-add
volume
whirlpool
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-图标的文字说明,对辅助设备可见。当不设置时,图标对辅助设备隐藏。
scalenumber-图标尺寸倍数。不设置时相当于 1
spinbooleanfalse是否保持旋转状态。
pulsebooleanfalse是否保持步进旋转状态。
inversebooleanfalse是否翻转颜色(用白色绘制,用于深色背景)。
flipstring-是否翻转,可选值为 'horizontal' / 'vertical',分别表示水平翻转与垂直翻转。

插槽

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