Yi.Framework/Yi.Ai.Vue3/FONTAWESOME_MIGRATION.md

FontAwesome 图标迁移指南

迁移步骤

1. 在组件中使用 FontAwesomeIcon

<!-- 旧方式：Element Plus 图标 -->
<template>
  <el-icon>
    <Check />
  </el-icon>
</template>

<script setup lang="ts">
import { Check } from '@element-plus/icons-vue';
</script>

<!-- 新方式：FontAwesome -->
<template>
  <FontAwesomeIcon icon="check" />
</template>

<!-- 或带 props -->
<template>
  <FontAwesomeIcon icon="check" size="lg" />
  <FontAwesomeIcon icon="spinner" spin />
  <FontAwesomeIcon icon="magnifying-glass" size="xl" />
</template>

2. 自动映射工具

使用 getFontAwesomeIcon 函数自动映射图标名：

import { getFontAwesomeIcon } from '@/utils/icon-mapping';

// 将 Element Plus 图标名转换为 FontAwesome 图标名
const faIcon = getFontAwesomeIcon('Check'); // 返回 'check'
const faIcon2 = getFontAwesomeIcon('ArrowLeft'); // 返回 'arrow-left'

3. Props 说明

Prop	类型	可选值	说明
icon	string	任意 FontAwesome 图标名	图标名称（不含 fa- 前缀）
size	string	xs, sm, lg, xl, 2x, 3x, 4x, 5x	图标大小
spin	boolean	true/false	是否旋转
pulse	boolean	true/false	是否脉冲动画
rotation	number	0, 90, 180, 270	旋转角度

4. 常用图标对照表

Element Plus	FontAwesome
Check	check
Close	xmark
Delete	trash
Edit	pen-to-square
Plus	plus
Search	magnifying-glass
Refresh	rotate-right
Loading	spinner
Download	download
ArrowLeft	arrow-left
ArrowRight	arrow-right
User	user
Setting	gear
View	eye
Hide	eye-slash
Lock	lock
Share	share-nodes
Heart	heart
Star	star
Clock	clock
Calendar	calendar
ChatLineRound	comment
Bell	bell
Document	file
Picture	image

5. 批量迁移示例

<!-- 迁移前 -->
<template>
  <div>
    <el-icon><Check /></el-icon>
    <el-icon><Close /></el-icon>
    <el-icon><Delete /></el-icon>
  </div>
</template>

<script setup lang="ts">
import { Check, Close, Delete } from '@element-plus/icons-vue';
</script>

<!-- 迁移后 -->
<template>
  <div>
    <FontAwesomeIcon icon="check" />
    <FontAwesomeIcon icon="xmark" />
    <FontAwesomeIcon icon="trash" />
  </div>
</template>

<script setup lang="ts">
// 不需要 import，FontAwesomeIcon 组件已自动导入
</script>

注意事项

1. 无需手动导入：FontAwesomeIcon 组件已在 vite.config.ts 中配置为自动导入
2. 图标名格式：使用小写、带连字符的图标名（如 magnifying-glass）
3. 完整图标列表：访问 FontAwesome 官网 查看所有可用图标
4. 渐进步骤：可以逐步迁移，Element Plus 图标和 FontAwesome 可以共存

优化建议

1. 减少包体积：迁移后可以移除 @element-plus/icons-vue 依赖
2. 统一图标风格：FontAwesome 图标风格更统一
3. 更好的性能：FontAwesome 按需加载，不会加载未使用的图标

查找图标

• Solid Icons 搜索
• 图标名格式：fa-solid fa-icon-name
• 在代码中使用时只需：icon="icon-name"