Baidu DLS

返回 DLS

Icon 图标

VEUI 的 Icon 组件目前兼容 Vue-Awesome 的方式注册并通过字符串类型的 name 属性指定图标;也支持直接传入组件定义进行渲染。

示例

abstract
align-center
align-left
align-right
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-up
arrow-up-solid
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
film
filter
filter-solid
flag
folder
folder-open
gateway
gift
hamburger
headphones
heart
heart-cancel
heart-solid
hierarchy
high-square
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
low-square
market
media-add
medium-square
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
shopping-cart
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
<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).sort()
    }
  }
}
</script>

API

属性

名称类型默认值描述
namestring-图标名称或其组件定义。
labelstring-图标的文字说明,对辅助设备可见。当不设置时,图标对辅助设备隐藏。
scalenumber-图标尺寸倍数。不设置时相当于 1
spinbooleanfalse是否保持旋转状态。
pulsebooleanfalse是否保持步进旋转状态。
inversebooleanfalse是否翻转颜色(用白色绘制,用于深色背景)。
flipstring-是否翻转,可选值为 'horizontal'/'vertical',分别表示水平翻转与垂直翻转。

name 属性使用组件定义时,仅支持 spin 属性。

插槽

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