NaEasy UI

Appearance

Icon 图标 ​

介绍 ​

Icon是基于矢量图的图标集，你可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。支持引入 iconfont 图标库。

导入 ​

js
import Icon from '@/components/basic/Icon.vue'

用法 ​

基础用法 ​

通过 name 属性来指定需要使用的图标，我们内置了一套图标库（见图标列表），可以直接传入对应的名称来使用。

vue
<template>
  <FlexRow>
    <Icon icon="smile-filling" />
    <Icon icon="success" />
    <Icon icon="user" />
  </FlexRow>
</template>

图标颜色 ​

通过 color 属性来设置图标的颜色。

vue
<template>
  <FlexRow>
    <Icon icon="smile-filling" color="#ff0900" />
    <Icon icon="rise-filling" color="#f58220" />
    <Icon icon="success-filling" color="#1d953f" />
  </FlexRow>
</template>

图标大小 ​

通过 size 属性来设置图标的尺寸大小。

vue
<template>
  <FlexRow>
    <Icon icon="file-common-filling" :size="80" />
    <Icon icon="file-common-filling" :size="100" />
    <Icon icon="file-common-filling" :size="120" />
  </FlexRow>
</template>

自定义图标 ​

支持注册自定义图标，可以是 字体图标、普通图像、svg图像。

vue
<template>
  <FlexRow>
    <Icon icon="custom1" :size="80" />
    <Icon icon="custom2" :size="100" />
    <Icon icon="custom3" :size="100" />
  </FlexRow>
</template>

<script setup lang="ts">
import { Icon } from '@/components/basic/Icon.vue'
import { IconUtils } from '@/components/basic/IconUtils'

//添加自定义图标
IconUtils.configIconMap({
  //普通图片
  'custom1': logo,
  //svg 文字
  'custom2': '<svg viewBox="0 0 1024 1024"><path d="M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z"></path></svg>',
  //网络图片
  'custom3': 'https://imengyu.top/assets/images/test/2.jpg',
});
</script>

所有图标 ​

下方展示了所有可用内部图标，点击可复制名称。

warning
zoom-in
zoom-out
add-bold
arrow-left-bold
arrow-up-bold
close-bold
arrow-down-bold
minus-bold
arrow-right-bold
select-bold
arrow-up-filling
arrow-down-filling
arrow-left-filling
arrow-right-filling
caps-unlock-filling
comment-filling
check-item-filling
clock-filling
delete-filling
decline-filling
dynamic-filling
intermediate-filling
favorite-filling
layout-filling
help-filling
history-filling
filter-filling
file-common-filling
news-filling
edit-filling
fullscreen-expand-filling
smile-filling
rise-filling
picture-filling
notification-filling
user-filling
setting-filling
switch-filling
work-filling
task-filling
success-filling
warning-filling
folder-filling
map-filling
prompt-filling
meh-filling
cry-filling
top-filling
home-filling
sorting
brand-huawei
brand-vivo
brand-xiaomi
apple
android
brand-microsoft
brand-google-color
googlep-play
safari
wechat
qqzone
weibo
wechat-moments
qq
wxpay
alipay
applepay
paypal
yinlian
yunshanfu
facebook
tumblr
twitter
linkedin
skype
line
pinterest
github
dingding
FaceID
TouchID
column-4
add
add-circle
adjust
arrow-up-circle
arrow-right-circle
arrow-down
ashbin
arrow-right
browse
bottom
back
bad
arrow-double-left
arrow-left-circle
arrow-double-right
caps-lock
camera
chart-bar
attachment
code
close
check-item
calendar
comment
column-vertical
column-horizontal
complete
chart-pie
cry
customer-service
delete
direction-down
copy
cut
data-view
direction-down-circle
direction-right
direction-up
discount
direction-left
download
electronics
drag
elipsis
export
explain
edit
eye-close
email
error
favorite
file-common
file-delete
file-add
film
fabulous
file
folder-close
filter
good
hide
home
history
file-open
forward
import
image-text
keyboard-26
keyboard-9
link
layout
fullscreen-shrink
layers
lock
fullscreen-expand
map
meh
menu
loading
help
minus-circle
modular
notification
huawei-copy
mic
more
pad
operation
play
print
mobile-phone
minus
navigation
pdf
prompt
move
refresh
run-up
picture
run-in
pin
save
search
share
scanning
security
sign-out
select
stop
success
smile
switch
setting
survey
task
skip
text
time
telephone-out
toggle-left
toggle-right
telephone
top
unlock
user
upload
work
training
check-mark
sex-male
sex-female
mute
sound
trash

API 参考 ​

Props ​

名称说明类型必填默认值
icon图标名称或图片 URLstring--
size图标大小number｜string-45
color图标颜色string--
innerStyle自定义样式object--