MrleeAdmin/frontend/web/app/components/icon/icon-usage.md

图标组件使用说明

功能特性

• 支持多种图标库：Ant Design、Element Plus、Carbon、IC、Lucide、Ri 等
• 支持自定义图标
• 支持图标选择器组件
• 支持离线模式

安装依赖

pnpm add @iconify/vue @iconify/json

使用方式

1. 基础图标组件 (Iconify)

<template>
  <Iconify icon="ant-design:home-outlined" />
  <Iconify icon="ep:home-filled" />
  <Iconify icon="carbon:home" />
  <Iconify icon="ic:baseline-home" />
  <Iconify icon="lucide:home" />
  <Iconify icon="ri:home-line" />
</template>

<script setup lang="ts">
import Iconify from '~/components/iconify.vue'
</script>

2. 自定义尺寸和颜色

<template>
  <Iconify icon="ant-design:home-outlined" width="24" height="24" />
  <Iconify icon="ant-design:home-outlined" width="32" height="32" color="#409eff" />
  <Iconify icon="ant-design:home-outlined" size="1.5em" color="#67c23a" />
</template>

3. 图标选择器 (IconSelector)

<template>
  <IconSelector v-model="selectedIcon" text="选择图标" width="300px" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import IconSelector from '~/components/icon-selector.vue'

const selectedIcon = ref('')
</script>

4. 监听图标选择事件

<template>
  <IconSelector v-model="selectedIcon" @get-icon="handleGetIcon" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import IconSelector from '~/components/icon-selector.vue'

const selectedIcon = ref('')

const handleGetIcon = (icon: string) => {
  console.log('选择的图标:', icon)
}
</script>

支持的图标库

图标库	前缀	示例
Ant Design	ant-design	ant-design:home-outlined
Element Plus	ep	ep:home-filled
Carbon	carbon	carbon:home
IC	ic	ic:baseline-home
Lucide	lucide	lucide:home
Ri	ri	ri:home-line

自定义添加图标库

1. 安装图标库

pnpm add @iconify-json/your-icon-library

2. 在 load-icon.ts 中添加

import YourIcons from '@iconify/json/json/your-icon-library.json'
addCollection(YourIcons)

3. 在 icon-selector.vue 中添加

const iconifyPrefixs = ['ant-design', 'carbon', 'ic', 'lucide', 'ep', 'ri', 'your-icon-library']

配置说明

离线模式

在 .env 文件中配置：

VITE_APP_ICON_OFFLINE=true
VITE_APP_ICONIFY_PREFIX=ant-design,carbon,ic,lucide,ep,ri

图标选择器配置

属性	类型	默认值	说明
modelValue	string	''	v-model 绑定的图标值
text	string	'图标选择器'	显示文本
width	string	'200px'	组件宽度
size	string	'default'	组件大小：large/default/small
disabled	boolean	false	是否禁用

注意事项

1. 图标名称格式：图标库名称:图标名称
2. 离线模式下需要预先加载所有图标数据
3. 图标选择器支持搜索功能
4. 图标选择器支持分页显示

示例代码

完整示例请参考项目中的使用场景。