Skip to main content
项目的图标主要由@vben/icons包提供，建议统一在该包内部管理，以便于统一管理和维护。如果你使用的是 Vscode，推荐安装 Iconify IntelliSense 插件，可以方便的查找和使用图标。
项目中有以下多种图标使用方式，可以根据实际情况选择使用：
注意：使用下述的方式，都是每次联网拉取图标，如果你的项目需要离线部署，不要使用Iconify的方案。

​
离线图标

离线图标目前有两种方案：

​
手动注册

  1. 手动将svg文件复制到packages/icons/src/svg/icons 目录下，然后在packages/icons/src/svg/index.ts文件中注册图标
手动注册图标 createIconifyIcon中是svg图标的文件名称。 注册之后，可以通过如下方式使用图标SVG 
import { IconifyIcon } from '@vben/icons';

// Vue
<IconifyIcon icon="svg:dify" />

​
使用Lucide Icon

推荐这种方式引入图标，使用比较简单
  1. 去Lucide官网查找图标名称
https://lucide.dev/icons/ 如下此图标名称是 airplay Lucide图标
  1. 注册图标名称
进入到packages/@core/base/icons/src/lucide.ts注册名称 注册图标
  1. 使用图标
import { Airplay } from '@vben/icons';

// Vue
<Airplay :size="18" />

​
Iconify 图标

集成了 iconify 图标库

​
新增

可在 packages/icons/src/iconify 目录下新增图标： 
// packages/icons/src/iconify/index.ts
import { createIconifyIcon } from '@vben-core/icons';

export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');

​
使用

<script setup lang="ts">
import { MdiKeyboardEsc } from '@vben/icons';
</script>

<template>
  <!-- 一个宽高为20px的图标 -->
  <MdiKeyboardEsc class="size-5" />
</template>

​
Svg 图标

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

​
新增

可以在 packages/icons/src/svg/icons 目录下新增图标文件test.svg, 然后在 packages/icons/src/svg/index.ts 中引入： 
// packages/icons/src/svg/index.ts
import { createIconifyIcon } from '@vben-core/icons';

const SvgTestIcon = createIconifyIcon('svg:test');

export { SvgTestIcon };

​
使用

<script setup lang="ts">
import { SvgTestIcon } from '@vben/icons';
</script>

<template>
  <!-- 一个宽高为20px的图标 -->
  <SvgTestIcon class="size-5" />
</template>

​
Tailwind CSS 图标

​
使用

直接添加 Tailwind CSS 的图标类名即可使用，图标类名可查看 iconify ： 
<span class="icon-[mdi--ab-testing]"></span>