mirror of
https://github.com/KwiTsukasa/kt-template-admin.git
synced 2026-05-28 00:37:43 +08:00
127 lines
2.1 KiB
Markdown
127 lines
2.1 KiB
Markdown
# 图标使用
|
||
|
||
框架支持多种图标使用方式。
|
||
|
||
## Iconify 图标
|
||
|
||
推荐使用 [Iconify](https://iconify.design/)，支持100+图标集。
|
||
|
||
### 基础用法
|
||
|
||
```vue
|
||
<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>
|
||
```
|
||
|
||
### 图标大小
|
||
|
||
```vue
|
||
<template>
|
||
<Icon icon="mdi:home" class="size-4" />
|
||
<Icon icon="mdi:home" class="size-6" />
|
||
<Icon icon="mdi:home" class="size-8" />
|
||
</template>
|
||
```
|
||
|
||
### 图标颜色
|
||
|
||
```vue
|
||
<template>
|
||
<Icon icon="mdi:home" class="text-primary" />
|
||
<Icon icon="mdi:home" class="text-red-500" />
|
||
</template>
|
||
```
|
||
|
||
## 路由菜单图标
|
||
|
||
```ts
|
||
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 图标
|
||
|
||
```ts
|
||
// 将 SVG 文件放入 src/assets/icons/ 目录
|
||
// 文件名即为图标名
|
||
```
|
||
|
||
```vue
|
||
<template>
|
||
<svg-icon name="custom-icon" />
|
||
</template>
|
||
```
|
||
|
||
## Tailwind CSS 图标
|
||
|
||
```vue
|
||
<template>
|
||
<div class="i-mdi-home"></div>
|
||
<div class="i-carbon-user text-xl"></div>
|
||
</template>
|
||
```
|
||
|
||
## 图标搜索
|
||
|
||
- [Iconify 图标搜索](https://icon-sets.iconify.design/)
|
||
- [Material Design Icons](https://pictogrammers.com/library/mdi/)
|
||
- [Lucide Icons](https://lucide.dev/icons/)
|
||
|
||
## 自定义图标组件
|
||
|
||
```vue
|
||
<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>
|
||
```
|