# PC端与移动端图标对照文档

## 概述

本文档记录了PC端（@ant-design/icons）和移动端（antd-mobile-icons）的图标名称对照，以及正确的导入方式。

## 导入方式

### PC端图标 (@ant-design/icons)
```typescript
import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  // ... 其他图标
} from '@ant-design/icons';
```

### 移动端图标 (antd-mobile-icons)
```typescript
import {
  AntOutline,
  ArrowDownCircleOutline,
  UserOutline,
  // ... 其他图标
} from 'antd-mobile-icons';
```

## 图标对照表

### 常用图标对照

| 功能描述 | PC端图标 | 移动端图标 | 备注 |
|---------|---------|-----------|------|
| 首页 | HomeOutlined | HomeOutline | 完全对应 |
| 用户 | UserOutlined | UserOutline | 完全对应 |
| 设置 | SettingOutlined | SettingOutline | 完全对应 |
| 搜索 | SearchOutlined | SearchOutline | 完全对应 |
| 添加 | PlusOutlined | AddOutline | 完全对应 |
| 编辑 | EditOutlined | EditSOutline | 移动端略有不同 |
| 删除 | DeleteOutlined | DeleteOutline | 完全对应 |
| 复制 | CopyOutlined | CopyOutline | 完全对应 |
| 刷新 | ReloadOutlined | RefreshOutline | 完全对应 |
| 二维码 | QrcodeOutlined | QrCodeOutline | 完全对应 |
| 日历 | CalendarOutlined | CalendarOutline | 完全对应 |
| 时钟 | ClockCircleOutlined | ClockCircleOutline | 完全对应 |
| 箭头向上 | UpOutlined | UpOutline | 完全对应 |
| 箭头向下 | DownOutlined | DownOutline | 完全对应 |
| 箭头向左 | LeftOutlined | LeftOutline | 完全对应 |
| 箭头向右 | RightOutlined | RightOutline | 完全对应 |
| 返回 | ArrowLeftOutlined | LeftOutline | 移动端使用LeftOutline |
| 关闭 | CloseOutlined | CloseOutline | 完全对应 |
| 检查 | CheckOutlined | CheckOutline | 完全对应 |
| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | 完全对应 |
| 信息 | InfoCircleOutlined | InfoCircleOutline | 完全对应 |
| 成功 | CheckCircleOutlined | CheckCircleOutline | 完全对应 |
| 错误 | CloseCircleOutlined | CloseCircleOutline | 完全对应 |

### 方向性图标

| 功能描述 | PC端图标 | 移动端图标 |
|---------|---------|-----------|
| 向上 | UpOutlined | UpOutline |
| 向下 | DownOutlined | DownOutline |
| 向左 | LeftOutlined | LeftOutline |
| 向右 | RightOutlined | RightOutline |
| 向上圆形 | UpCircleOutlined | UpCircleOutline |
| 向下圆形 | DownCircleOutlined | DownCircleOutline |
| 向左圆形 | LeftCircleOutlined | LeftCircleOutline |
| 向右圆形 | RightCircleOutlined | RightCircleOutline |

### 编辑类图标

| 功能描述 | PC端图标 | 移动端图标 |
|---------|---------|-----------|
| 编辑 | EditOutlined | EditSOutline |
| 删除 | DeleteOutlined | DeleteOutline |
| 复制 | CopyOutlined | CopyOutline |
| 剪切 | ScissorOutlined | ScissorOutline |
| 撤销 | UndoOutlined | UndoOutline |
| 重做 | RedoOutlined | RedoOutline |
| 保存 | SaveOutlined | SaveOutline |

### 通信类图标

| 功能描述 | PC端图标 | 移动端图标 |
|---------|---------|-----------|
| 消息 | MessageOutlined | MessageOutline |
| 邮件 | MailOutlined | MailOutline |
| 电话 | PhoneOutlined | PhoneOutline |
| 视频通话 | VideoCameraOutlined | VideoCameraOutline |
| 语音 | AudioOutlined | AudioOutline |

### 媒体类图标

| 功能描述 | PC端图标 | 移动端图标 |
|---------|---------|-----------|
| 图片 | PictureOutlined | PictureOutline |
| 视频 | VideoCameraOutlined | VideoCameraOutline |
| 音频 | AudioOutlined | AudioOutline |
| 文件 | FileOutlined | FileOutline |
| 文件夹 | FolderOutlined | FolderOutline |
| 相机 | CameraOutlined | CameraOutline |

### 导航类图标

| 功能描述 | PC端图标 | 移动端图标 |
|---------|---------|-----------|
| 菜单 | MenuOutlined | MenuOutline |
| 汉堡菜单 | MenuFoldOutlined | MenuOutline |
| 展开菜单 | MenuUnfoldOutlined | MenuOutline |
| 面包屑 | BreadcrumbOutlined | BreadcrumbOutline |
| 分页 | PaginationOutlined | PaginationOutline |

### 数据展示类图标

| 功能描述 | PC端图标 | 移动端图标 |
|---------|---------|-----------|
| 表格 | TableOutlined | TableOutline |
| 列表 | UnorderedListOutlined | UnorderedListOutline |
| 卡片 | CreditCardOutlined | CreditCardOutline |
| 统计 | BarChartOutlined | BarChartOutline |
| 饼图 | PieChartOutlined | PieChartOutline |
| 折线图 | LineChartOutlined | LineChartOutline |
| 仪表盘 | DashboardOutlined | DashboardOutline |

### 反馈类图标

| 功能描述 | PC端图标 | 移动端图标 |
|---------|---------|-----------|
| 成功 | CheckCircleOutlined | CheckCircleOutline |
| 错误 | CloseCircleOutlined | CloseCircleOutline |
| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline |
| 信息 | InfoCircleOutlined | InfoCircleOutline |
| 加载 | LoadingOutlined | LoadingOutline |
| 等待 | ClockCircleOutlined | ClockCircleOutline |

## 使用建议

### 1. 项目类型判断
- **PC端项目**: 使用 `@ant-design/icons`
- **移动端项目**: 使用 `antd-mobile-icons`

### 2. 图标选择原则
- 优先选择语义化图标
- 保持图标风格一致性
- 考虑图标在不同尺寸下的清晰度

### 3. 常见错误避免
- 不要混用PC端和移动端图标
- 注意图标名称的大小写
- 确保图标在对应包中存在

### 4. 图标替换策略
当某个图标在目标包中不存在时：
1. 查找语义相近的图标
2. 使用通用图标（如QuestionOutlined）
3. 考虑使用文字替代
4. 创建自定义图标组件

## 实际项目中的使用示例

### PC端项目示例
```typescript
import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  SearchOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  CopyOutlined,
  ReloadOutlined,
  QrcodeOutlined,
  CalendarOutlined,
  ClockCircleOutlined,
  UpOutlined,
  DownOutlined,
  LeftOutlined,
  RightOutlined,
  CloseOutlined,
  CheckOutlined,
  ExclamationCircleOutlined,
  InfoCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
} from '@ant-design/icons';
```

### 移动端项目示例
```typescript
import {
  HomeOutline,
  UserOutline,
  SettingOutline,
  SearchOutline,
  AddOutline,
  EditSOutline,
  DeleteOutline,
  CopyOutline,
  RefreshOutline,
  QrCodeOutline,
  CalendarOutline,
  ClockCircleOutline,
  UpOutline,
  DownOutline,
  LeftOutline,
  RightOutline,
  CloseOutline,
  CheckOutline,
  ExclamationCircleOutline,
  InfoCircleOutline,
  CheckCircleOutline,
  CloseCircleOutline,
} from 'antd-mobile-icons';
```

## 注意事项

1. **包依赖**: 确保项目中已安装对应的图标包
2. **版本兼容**: 注意图标包版本与UI框架版本的兼容性
3. **性能考虑**: 按需导入图标，避免全量导入
4. **样式覆盖**: 可以通过CSS自定义图标颜色和大小
5. **无障碍**: 为图标添加适当的aria-label属性

## 更新记录

- 2024-01-XX: 初始版本，包含常用图标对照
- 后续根据实际使用情况持续更新