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>

所有图标 ​

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

API 参考 ​

Props ​

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