134 lines
3.3 KiB
Markdown
134 lines
3.3 KiB
Markdown
# 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"`
|