admin-vben/docs/src/en/guide/essentials/icons.md

Icons

::: tip About Icon Management

• The icons in the project are mainly provided by the @vben/icons package. It is recommended to manage them within this package for unified management and maintenance.
• If you are using Vscode, it is recommended to install the Iconify IntelliSense plugin, which makes it easy to find and use icons.

:::

There are several ways to use icons in the project, you can choose according to the actual situation:

Iconify Icons

Integrated with the iconify icon library

Adding New Icons

You can add new icons in the packages/icons/src/iconify directory:

// packages/icons/src/iconify/index.ts
import { createIconifyIcon } from '@vben-core/icons';

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

Usage

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

<template>
  <!-- An icon with a width and height of 20px -->
  <MdiKeyboardEsc class="size-5" />
</template>

SVG Icons

Instead of using Svg Sprite, SVG icons are directly imported,

Adding New Icons

You can add new icon files test.svg in the packages/icons/src/svg/icons directory, and then import it in 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 };

Usage

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

<template>
  <!-- An icon with a width and height of 20px -->
  <SvgTestIcon class="size-5" />
</template>

Tailwind CSS Icons

Usage

You can use the icons by directly adding the Tailwind CSS icon class names, which can be found on iconify ：

<span class="icon-[mdi--ab-testing]"></span>