图标

关于图标的管理

  • 项目的图标主要由@components/icon组件提供，建议统一在该组件内部管理，以便于统一管理和维护。
  • 如果你使用的是 Vscode，推荐安装 Iconify IntelliSenseopen in new window 插件，可以方便的查找和使用图标。

项目中有以下多种图标使用方式，可以根据实际情况选择使用：

Iconify 图标 推荐

集成了 iconifyopen in new window 图标库

在线查看open in new window

使用

<script setup lang="ts">
import { Icon } from '@components/icon';
</script>

<template>
  <Icon icon="ant-design:alert-outlined" />
</template>

Svg 图标 推荐

没有采用 Svg Sprite 的方式，而是直接引入 Svg 图标，

新增

可以在 src/components/icon/svg 目录下新增图标文件test.svg, 然后就可以使用Icon组件中的icon属性引入：

使用

<template>
  <div>
    <Icon icon="svg:test" />
    <Icon icon="svg:gitee" />
    <Icon icon="svg:download" />
  </div>
</template>
<script setup lang="tsx">
  import { Icon } from '@/components/icon'
</script>

离线图标

可通过修改.env配置启用离线图标

# 是否启用离线图标
VITE_APP_ICON_OFFLINE=true

注：目前只默认增加了下面几组图标库，如果需要其他图标库，请在该文件上src\utils\load-icon.ts自行添加。

import { addCollection } from '@iconify/vue'
import AntDesignIcons from '@iconify/json/json/ant-design.json'
import CarbonIcons from '@iconify/json/json/carbon.json'
import IcIcons from '@iconify/json/json/ic.json'
import LogosIcons from '@iconify/json/json/logos.json'
import LucideIcons from '@iconify/json/json/lucide.json'
import EP from '@iconify/json/json/ep.json'
addCollection(AntDesignIcons)
addCollection(LucideIcons)
addCollection(CarbonIcons)
addCollection(IcIcons as any)
addCollection(LogosIcons as any)
addCollection(EP)

IconPicker 图标选择器

src/components/form/components/icon-picker.vue

IconPicker 是一个图标选择器组件，用于在页面中选择图标。这里对原Art Design Pro的ArtIconSelector进行了改造，使其支持更多图标库。目前支持Iconify图标库、本地Svg图标、原内置图标三种方式，其中使用.env下的配置可支持更多的Iconify图标组：

# 图标前缀-提供给icon-picker选择的图标，这里的值建议和src/utils/load-icon.ts中引入的一致
VITE_APP_ICONIFY_PREFIX = ep,ant-design,carbon,ic,logos,lucide

图标选择器