kt-template-admin/skills/references/core/icons.md

图标使用

框架支持多种图标使用方式。

Iconify 图标

推荐使用 Iconify，支持100+图标集。

基础用法

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

<template>
  <!-- 使用 Iconify 图标 -->
  <Icon icon="mdi:home" />
  <Icon icon="carbon:user" />
  <Icon icon="ant-design:setting" />
  <Icon icon="lucide:search" />
</template>

图标大小

<template>
  <Icon icon="mdi:home" class="size-4" />
  <Icon icon="mdi:home" class="size-6" />
  <Icon icon="mdi:home" class="size-8" />
</template>

图标颜色

<template>
  <Icon icon="mdi:home" class="text-primary" />
  <Icon icon="mdi:home" class="text-red-500" />
</template>

路由菜单图标

const routes = [
  {
    meta: {
      icon: 'mdi:home',
      title: '首页',
    },
    name: 'Home',
    path: '/home',
  },
  {
    meta: {
      icon: 'carbon:user',
      title: '用户管理',
    },
    name: 'User',
    path: '/user',
  },
];

常用图标集

图标集	前缀	示例
Material Design	mdi:	mdi:home
Carbon	carbon:	carbon:user
Ant Design	ant-design:	ant-design:setting
Lucide	lucide:	lucide:search
Font Awesome	fa:	fa:home
Remix Icon	ri:	ri:home-line

SVG 图标

全局注册 SVG 图标

// 将 SVG 文件放入 src/assets/icons/ 目录
// 文件名即为图标名

<template>
  <svg-icon name="custom-icon" />
</template>

Tailwind CSS 图标

<template>
  <div class="i-mdi-home"></div>
  <div class="i-carbon-user text-xl"></div>
</template>

图标搜索

• Iconify 图标搜索
• Material Design Icons
• Lucide Icons

自定义图标组件

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

defineProps<{
  icon: string;
  size?: number;
}>();
</script>

<template>
  <Icon
    :icon="icon"
    :class="size ? `size-${size}` : 'size-5'"
  />
</template>