# FontAwesome 图标迁移指南

## 迁移步骤

### 1. 在组件中使用 FontAwesomeIcon

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

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

```vue
<!-- 新方式：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` 函数自动映射图标名：

```typescript
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. 批量迁移示例

```vue
<!-- 迁移前 -->
<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 官网](https://fontawesome.com/search?o=r&m=free) 查看所有可用图标
4. **渐进步骤**：可以逐步迁移，Element Plus 图标和 FontAwesome 可以共存

## 优化建议

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

## 查找图标

- [Solid Icons 搜索](https://fontawesome.com/search?o=r&m=free)
- 图标名格式：`fa-solid fa-icon-name`
- 在代码中使用时只需：`icon="icon-name"`