图标

::: tip 关于图标的管理

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

:::

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

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>