Icons

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 Recommended

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 Recommended

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 Not Recommended

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>

Contributors

invalid w

Li Kui

Changelog

Last edited 28 days ago

View full history

8230493-feat(@vben/docs): support english documents (#4202)