Icon图标

1. 图标组件介绍

梵医云前端项目使用 @iconify/vue 和 Iconify 实现图标功能，支持多种图标库，包括 Element Plus、Font Awesome 等。

1.1 图标库支持

Element Plus (ep:) - Element Plus 官方图标库
Font Awesome 4 (fa:) - Font Awesome 4 图标库
Font Awesome 5 Solid (fa-solid:) - Font Awesome 5 实心图标库

1.2 图标组件位置

图标组件：@/components/Icon/src/Icon.vue
图标选择器：@/components/Icon/src/IconSelect.vue
图标数据：@/components/Icon/src/data.ts
图标类型：@/types/icon.d.ts

2. 图标使用方法

2.1 基础使用

vue

<template>
  <Icon icon="ep:home-filled" />
  <Icon icon="fa:user" />
  <Icon icon="fa-solid:check" />
</template>

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

2.2 设置图标颜色

vue

<template>
  <Icon icon="ep:home-filled" color="#409EFF" />
  <Icon icon="ep:home-filled" color="red" />
  <Icon icon="ep:home-filled" color="var(--el-color-primary)" />
</template>

2.3 设置图标大小

vue

<template>
  <Icon icon="ep:home-filled" :size="16" />
  <Icon icon="ep:home-filled" :size="24" />
  <Icon icon="ep:home-filled" :size="32" />
</template>

2.4 同时设置颜色和大小

vue

<template>
  <Icon icon="ep:home-filled" color="#409EFF" :size="24" />
</template>

2.5 在路由中使用图标

typescript

{
  path: '/user',
  component: Layout,
  name: 'UserInfo',
  meta: {
    icon: 'ep:user',
    title: '用户管理'
  }
}

2.6 在表格中使用图标

vue

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="名称">
      <template #default="{ row }">
        <Icon :icon="row.icon" :size="16" />
        <span class="ml-2">{{ row.name }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

3. 图标属性说明

3.1 Icon 组件属性

属性	类型	默认值	说明
icon	String	-	图标名称，格式为 `prefix:icon-name`
color	String	-	图标颜色，支持颜色值、CSS变量
size	Number	16	图标大小，单位为像素
svgClass	String	''	图标 SVG 的 class 类名

3.2 IconSelect 组件属性

属性	类型	默认值	说明
modelValue	String	-	选中的图标值，双向绑定

3.3 IconSelect 组件事件

事件名	说明	回调参数
update:modelValue	图标值变化时触发	(value: string) => void

4. 图标类型详解

4.1 Element Plus 图标 (ep:)

Element Plus 是项目中最常用的图标库，包含丰富的 UI 图标。

常用图标示例：

vue

<template>
  <!-- 导航图标 -->
  <Icon icon="ep:home-filled" />
  <Icon icon="ep:user" />
  <Icon icon="ep:setting" />
  <Icon icon="ep:menu" />

  <!-- 操作图标 -->
  <Icon icon="ep:edit" />
  <Icon icon="ep:delete" />
  <Icon icon="ep:search" />
  <Icon icon="ep:refresh" />
  <Icon icon="ep:download" />
  <Icon icon="ep:upload" />

  <!-- 状态图标 -->
  <Icon icon="ep:success-filled" />
  <Icon icon="ep:warning-filled" />
  <Icon icon="ep:info-filled" />
  <Icon icon="ep:circle-close-filled" />

  <!-- 箭头图标 -->
  <Icon icon="ep:arrow-left" />
  <Icon icon="ep:arrow-right" />
  <Icon icon="ep:arrow-up" />
  <Icon icon="ep:arrow-down" />

  <!-- 文件图标 -->
  <Icon icon="ep:document" />
  <Icon icon="ep:folder" />
  <Icon icon="ep:picture" />
  <Icon icon="ep:video-camera" />

  <!-- 通讯图标 -->
  <Icon icon="ep:message" />
  <Icon icon="ep:phone" />
  <Icon icon="ep:bell" />
  <Icon icon="ep:chat-dot-round" />

  <!-- 其他图标 -->
  <Icon icon="ep:location" />
  <Icon icon="ep:calendar" />
  <Icon icon="ep:clock" />
  <Icon icon="ep:star" />
</template>

4.2 Font Awesome 4 图标 (fa:)

Font Awesome 4 提供了大量经典图标。

常用图标示例：

vue

<template>
  <Icon icon="fa:user" />
  <Icon icon="fa:home" />
  <Icon icon="fa:cog" />
  <Icon icon="fa:search" />
  <Icon icon="fa:edit" />
  <Icon icon="fa:trash" />
  <Icon icon="fa:check" />
  <Icon icon="fa:times" />
  <Icon icon="fa:plus" />
  <Icon icon="fa:minus" />
</template>

4.3 Font Awesome 5 Solid 图标 (fa-solid:)

Font Awesome 5 Solid 提供了实心图标。

常用图标示例：

vue

<template>
  <Icon icon="fa-solid:user" />
  <Icon icon="fa-solid:home" />
  <Icon icon="fa-solid:cog" />
  <Icon icon="fa-solid:search" />
  <Icon icon="fa-solid:edit" />
  <Icon icon="fa-solid:trash" />
  <Icon icon="fa-solid:check" />
  <Icon icon="fa-solid:times" />
  <Icon icon="fa-solid:plus" />
  <Icon icon="fa-solid:minus" />
</template>

5. 图标选择器使用

5.1 基础使用

vue

<template>
  <IconSelect v-model="selectedIcon" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconSelect } from '@/components/Icon'

const selectedIcon = ref('ep:home-filled')
</script>

5.2 图标选择器功能

多图标库切换：支持 Element Plus、Font Awesome 4、Font Awesome 5 Solid
图标搜索：支持按图标名称搜索
分页显示：每页显示 96 个图标
实时预览：选中图标实时显示在输入框中

5.3 图标选择器示例

vue

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="菜单图标">
      <IconSelect v-model="form.icon" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { IconSelect } from '@/components/Icon'

const form = reactive({
  icon: 'ep:home-filled'
})
</script>

6. 常用图标分类

6.1 导航类图标

vue

<template>
  <Icon icon="ep:home-filled" />
  <Icon icon="ep:user" />
  <Icon icon="ep:setting" />
  <Icon icon="ep:menu" />
  <Icon icon="ep:more" />
</template>

6.2 操作类图标

vue

<template>
  <Icon icon="ep:edit" />
  <Icon icon="ep:delete" />
  <Icon icon="ep:search" />
  <Icon icon="ep:refresh" />
  <Icon icon="ep:download" />
  <Icon icon="ep:upload" />
  <Icon icon="ep:copy-document" />
  <Icon icon="ep:share" />
</template>

6.3 状态类图标

vue

<template>
  <Icon icon="ep:success-filled" color="#67C23A" />
  <Icon icon="ep:warning-filled" color="#E6A23C" />
  <Icon icon="ep:info-filled" color="#409EFF" />
  <Icon icon="ep:circle-close-filled" color="#F56C6C" />
  <Icon icon="ep:loading" />
</template>

6.4 箭头类图标

vue

<template>
  <Icon icon="ep:arrow-left" />
  <Icon icon="ep:arrow-right" />
  <Icon icon="ep:arrow-up" />
  <Icon icon="ep:arrow-down" />
  <Icon icon="ep:arrow-left-bold" />
  <Icon icon="ep:arrow-right-bold" />
  <Icon icon="ep:arrow-up-bold" />
  <Icon icon="ep:arrow-down-bold" />
</template>

6.5 文件类图标

vue

<template>
  <Icon icon="ep:document" />
  <Icon icon="ep:document-add" />
  <Icon icon="ep:document-delete" />
  <Icon icon="ep:folder" />
  <Icon icon="ep:folder-opened" />
  <Icon icon="ep:picture" />
  <Icon icon="ep:video-camera" />
</template>

6.6 通讯类图标

vue

<template>
  <Icon icon="ep:message" />
  <Icon icon="ep:chat-dot-round" />
  <Icon icon="ep:phone" />
  <Icon icon="ep:phone-filled" />
  <Icon icon="ep:bell" />
  <Icon icon="ep:bell-filled" />
</template>

6.7 商务类图标

vue

<template>
  <Icon icon="ep:shopping-cart" />
  <Icon icon="ep:goods" />
  <Icon icon="ep:coin" />
  <Icon icon="ep:wallet" />
  <Icon icon="ep:credit-card" />
  <Icon icon="ep:discount" />
</template>

6.8 系统类图标

vue

<template>
  <Icon icon="ep:setting" />
  <Icon icon="ep:tools" />
  <Icon icon="ep:cpu" />
  <Icon icon="ep:monitor" />
  <Icon icon="ep:connection" />
  <Icon icon="ep:operation" />
</template>

7. 自定义图标

7.1 使用 SVG 图标

如果需要使用自定义 SVG 图标，可以使用 svg-icon: 前缀：

vue

<template>
  <Icon icon="svg-icon:custom-icon" />
</template>

7.2 添加自定义 SVG 图标

在项目中添加 SVG 图标文件
使用 svg-icon: 前缀引用图标
确保图标已正确注册到项目中

8. 图标在菜单中的使用

8.1 路由配置中使用图标

typescript

{
  path: '/system',
  component: Layout,
  redirect: '/system/user',
  name: 'System',
  meta: {
    title: '系统管理',
    icon: 'ep:setting'
  },
  children: [
    {
      path: 'user',
      component: () => import('@/views/system/user/index.vue'),
      name: 'SystemUser',
      meta: {
        title: '用户管理',
        icon: 'ep:user'
      }
    },
    {
      path: 'role',
      component: () => import('@/views/system/role/index.vue'),
      name: 'SystemRole',
      meta: {
        title: '角色管理',
        icon: 'ep:user-filled'
      }
    }
  ]
}

8.2 动态菜单图标

从后端获取的菜单数据中，icon 字段用于指定图标：

typescript

interface Menu {
  id: number
  name: string
  path: string
  icon: string
  children?: Menu[]
}

9. 图标最佳实践

9.1 图标命名规范

使用 PascalCase 命名图标变量
图标名称使用 kebab-case 格式
始终包含图标库前缀

typescript

// ✅ 好的命名
const HomeIcon = 'ep:home-filled'
const UserIcon = 'ep:user'
const EditIcon = 'ep:edit'

// ❌ 不好的命名
const homeIcon = 'ep:home-filled'
const user_icon = 'ep:user'
const editIcon = 'ep:edit'

9.2 图标大小规范

根据使用场景选择合适的图标大小：

场景	推荐大小
菜单图标	16px - 20px
按钮图标	14px - 16px
表格图标	14px - 16px
状态图标	16px - 24px
标题图标	20px - 24px

9.3 图标颜色规范

使用 CSS 变量定义图标颜色，便于主题切换：

vue

<template>
  <Icon icon="ep:home-filled" color="var(--el-color-primary)" />
  <Icon icon="ep:success-filled" color="var(--el-color-success)" />
  <Icon icon="ep:warning-filled" color="var(--el-color-warning)" />
  <Icon icon="ep:circle-close-filled" color="var(--el-color-danger)" />
</template>

9.4 图标性能优化

使用图标懒加载
避免在列表中重复加载相同图标
合理使用图标缓存

vue

<template>
  <!-- ✅ 好的做法：使用 v-if 避免重复渲染 -->
  <Icon v-if="showIcon" icon="ep:home-filled" />

  <!-- ❌ 不好的做法：频繁切换图标 -->
  <Icon :icon="dynamicIcon" />
</template>

9.5 图标可访问性

为图标添加适当的 ARIA 属性，提高可访问性：

vue

<template>
  <Icon icon="ep:home-filled" aria-label="首页" />
  <Icon icon="ep:user" aria-label="用户" />
</template>

10. 图标常见问题

10.1 图标不显示

问题原因：

图标名称错误
图标库未正确加载
图标前缀错误

解决方案：

vue

<template>
  <!-- ✅ 正确的图标名称 -->
  <Icon icon="ep:home-filled" />

  <!-- ❌ 错误的图标名称 -->
  <Icon icon="home-filled" />
</template>

10.2 图标大小不生效

问题原因：

size 属性未正确设置
样式被覆盖

解决方案：

vue

<template>
  <!-- ✅ 正确设置大小 -->
  <Icon icon="ep:home-filled" :size="24" />

  <!-- 使用内联样式 -->
  <Icon icon="ep:home-filled" :size="24" style="width: 24px; height: 24px;" />
</template>

10.3 图标颜色不生效

问题原因：

color 属性未正确设置
样式优先级问题

解决方案：

vue

<template>
  <!-- ✅ 正确设置颜色 -->
  <Icon icon="ep:home-filled" color="#409EFF" />

  <!-- 使用 CSS 变量 -->
  <Icon icon="ep:home-filled" color="var(--el-color-primary)" />

  <!-- 使用 !important 提高优先级 -->
  <Icon icon="ep:home-filled" color="#409EFF !important" />
</template>

11. 图标资源

11.1 官方文档

11.2 图标搜索工具

注意：本文档持续更新中，如有问题请及时反馈。

Icon图标 ​

1. 图标组件介绍 ​

1.1 图标库支持 ​

1.2 图标组件位置 ​

2. 图标使用方法 ​

2.1 基础使用 ​

2.2 设置图标颜色 ​

2.3 设置图标大小 ​

2.4 同时设置颜色和大小 ​

2.5 在路由中使用图标 ​

2.6 在表格中使用图标 ​

3. 图标属性说明 ​

3.1 Icon 组件属性 ​

3.2 IconSelect 组件属性 ​

3.3 IconSelect 组件事件 ​

4. 图标类型详解 ​

4.1 Element Plus 图标 (ep:) ​

4.2 Font Awesome 4 图标 (fa:) ​

4.3 Font Awesome 5 Solid 图标 (fa-solid:) ​

5. 图标选择器使用 ​

5.1 基础使用 ​

5.2 图标选择器功能 ​

5.3 图标选择器示例 ​

6. 常用图标分类 ​

6.1 导航类图标 ​

6.2 操作类图标 ​

6.3 状态类图标 ​

6.4 箭头类图标 ​

6.5 文件类图标 ​

6.6 通讯类图标 ​

6.7 商务类图标 ​

6.8 系统类图标 ​

7. 自定义图标 ​

7.1 使用 SVG 图标 ​

7.2 添加自定义 SVG 图标 ​

8. 图标在菜单中的使用 ​

8.1 路由配置中使用图标 ​

8.2 动态菜单图标 ​

9. 图标最佳实践 ​

9.1 图标命名规范 ​

9.2 图标大小规范 ​

9.3 图标颜色规范 ​

9.4 图标性能优化 ​

9.5 图标可访问性 ​

10. 图标常见问题 ​

10.1 图标不显示 ​

10.2 图标大小不生效 ​

10.3 图标颜色不生效 ​

11. 图标资源 ​

11.1 官方文档 ​

11.2 图标搜索工具 ​

Icon图标

1. 图标组件介绍

1.1 图标库支持

1.2 图标组件位置

2. 图标使用方法

2.1 基础使用

2.2 设置图标颜色

2.3 设置图标大小

2.4 同时设置颜色和大小

2.5 在路由中使用图标

2.6 在表格中使用图标

3. 图标属性说明

3.1 Icon 组件属性

3.2 IconSelect 组件属性

3.3 IconSelect 组件事件

4. 图标类型详解

4.1 Element Plus 图标 (ep:)

4.2 Font Awesome 4 图标 (fa:)

4.3 Font Awesome 5 Solid 图标 (fa-solid:)

5. 图标选择器使用

5.1 基础使用

5.2 图标选择器功能

5.3 图标选择器示例

6. 常用图标分类

6.1 导航类图标

6.2 操作类图标

6.3 状态类图标

6.4 箭头类图标

6.5 文件类图标

6.6 通讯类图标

6.7 商务类图标

6.8 系统类图标

7. 自定义图标

7.1 使用 SVG 图标

7.2 添加自定义 SVG 图标

8. 图标在菜单中的使用

8.1 路由配置中使用图标

8.2 动态菜单图标

9. 图标最佳实践

9.1 图标命名规范

9.2 图标大小规范

9.3 图标颜色规范

9.4 图标性能优化

9.5 图标可访问性

10. 图标常见问题

10.1 图标不显示

10.2 图标大小不生效

10.3 图标颜色不生效

11. 图标资源

11.1 官方文档

11.2 图标搜索工具