Icon

Demos

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

Props

NameTypeDefaultDescription
namestring | Object-The name of the icon or its component definition.
labelstring-The descriptive label for the icon, which is accessible to assistive devices. The icon is hidden for assistive devices if label doesn't exist.
scalenumber-The size scale of the icon. Doesn't scale by default.
spinbooleanfalseWhether the icon should be spinning.
pulsebooleanfalseWhether the icon should be pulsing.
inversebooleanfalseWhether to inverse the color. (Having a white foreground to be used against dark backgrounds.)
flipstring-How to flip an icon. Can be either 'horizontal' or 'vertical'.

Slots

NameDescription
defaultCan be used to implement a stacked icon. The embedded Icon components will be stacked together, being centered. The wrapper Icon doesn't require the name prop.
Edit this page on GitHubEdit