# 图标快速参考表

## 快速查找

### 🔍 按功能查找

| 功能 | PC端 | 移动端 | 导入方式 |
|------|------|--------|----------|
| **添加** | PlusOutlined | AddOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **编辑** | EditOutlined | EditSOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **删除** | DeleteOutlined | DeleteOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **复制** | CopyOutlined | CopyOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **搜索** | SearchOutlined | SearchOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **刷新** | ReloadOutlined | RefreshOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **设置** | SettingOutlined | SettingOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **用户** | UserOutlined | UserOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **首页** | HomeOutlined | HomeOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **返回** | ArrowLeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **关闭** | CloseOutlined | CloseOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **确认** | CheckOutlined | CheckOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **成功** | CheckCircleOutlined | CheckCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **错误** | CloseCircleOutlined | CloseCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **警告** | ExclamationCircleOutlined | ExclamationCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **信息** | InfoCircleOutlined | InfoCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **加载** | LoadingOutlined | LoadingOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **向上** | UpOutlined | UpOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **向下** | DownOutlined | DownOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **向左** | LeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **向右** | RightOutlined | RightOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **消息** | MessageOutlined | MessageOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **电话** | PhoneOutlined | PhoneOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **日历** | CalendarOutlined | CalendarOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **时钟** | ClockCircleOutlined | ClockCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **图片** | PictureOutlined | PictureOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **文件** | FileOutlined | FileOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **相机** | CameraOutlined | CameraOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **二维码** | QrcodeOutlined | QrCodeOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **微信** | WechatOutlined | WechatOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **设备** | MobileOutlined | MobileOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **团队** | TeamOutlined | TeamOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **订单** | ShoppingOutlined | ShoppingOutline | `@ant-design/icons` / `antd-mobile-icons` |
| **支付** | PayCircleOutlined | PayCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |

### 🔄 常见替换

| 原图标 | 替换为 | 说明 |
|--------|--------|------|
| RiseOutlined | UpOutline | 上升趋势 |
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
| ShareAltOutlined | LinkOutline | 分享功能 |
| BarChartOutlined | PieOutline | 图表功能 |
| LineChartOutlined | PieOutline | 图表功能 |
| UserAddOutlined | UserOutline | 用户添加 |
| SettingOutline | SettingOutline | 设置（移动端） |

## 导入模板

### PC端项目模板
```typescript
import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  SearchOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  CopyOutlined,
  ReloadOutlined,
  CloseOutlined,
  CheckOutlined,
  UpOutlined,
  DownOutlined,
  LeftOutlined,
  RightOutlined,
  MessageOutlined,
  CalendarOutlined,
  ClockCircleOutlined,
  PictureOutlined,
  FileOutlined,
  CameraOutlined,
  QrcodeOutlined,
  WechatOutlined,
  MobileOutlined,
  TeamOutlined,
  ShoppingOutlined,
  PayCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  InfoCircleOutlined,
  LoadingOutlined,
} from '@ant-design/icons';
```

### 移动端项目模板
```typescript
import {
  HomeOutline,
  UserOutline,
  SettingOutline,
  SearchOutline,
  AddOutline,
  EditSOutline,
  DeleteOutline,
  CopyOutline,
  RefreshOutline,
  CloseOutline,
  CheckOutline,
  UpOutline,
  DownOutline,
  LeftOutline,
  RightOutline,
  MessageOutline,
  CalendarOutline,
  ClockCircleOutline,
  PictureOutline,
  FileOutline,
  CameraOutline,
  QrCodeOutline,
  WechatOutline,
  MobileOutline,
  TeamOutline,
  ShoppingOutline,
  PayCircleOutline,
  CheckCircleOutline,
  CloseCircleOutline,
  ExclamationCircleOutline,
  InfoCircleOutline,
  LoadingOutline,
} from 'antd-mobile-icons';
```

## 使用示例

### 基础使用
```typescript
// PC端
import { HomeOutlined, UserOutlined } from '@ant-design/icons';

<HomeOutlined style={{ fontSize: 16, color: '#1890ff' }} />
<UserOutlined style={{ fontSize: 16, color: '#52c41a' }} />

// 移动端
import { HomeOutline, UserOutline } from 'antd-mobile-icons';

<HomeOutline style={{ fontSize: 16, color: '#1890ff' }} />
<UserOutline style={{ fontSize: 16, color: '#52c41a' }} />
```

### 按钮中使用
```typescript
// PC端
import { PlusOutlined, EditOutlined } from '@ant-design/icons';

<Button icon={<PlusOutlined />}>添加</Button>
<Button icon={<EditOutlined />}>编辑</Button>

// 移动端
import { AddOutline, EditSOutline } from 'antd-mobile-icons';

<Button>
  <AddOutline /> 添加
</Button>
<Button>
  <EditSOutline /> 编辑
</Button>
```

### 列表中使用
```typescript
// PC端
import { DeleteOutlined, CopyOutlined } from '@ant-design/icons';

<Button icon={<DeleteOutlined />} danger>删除</Button>
<Button icon={<CopyOutlined />}>复制</Button>

// 移动端
import { DeleteOutline, CopyOutline } from 'antd-mobile-icons';

<Button color="danger">
  <DeleteOutline /> 删除
</Button>
<Button>
  <CopyOutline /> 复制
</Button>
```

## 常见错误

### ❌ 错误示例
```typescript
// 错误：混用PC端和移动端图标
import { HomeOutlined } from '@ant-design/icons';  // PC端
import { UserOutline } from 'antd-mobile-icons';   // 移动端

// 错误：使用不存在的图标
import { RiseOutlined } from 'antd-mobile-icons';  // 不存在
import { UserAddOutline } from 'antd-mobile-icons'; // 不存在
```

### ✅ 正确示例
```typescript
// 正确：统一使用移动端图标
import { 
  HomeOutline, 
  UserOutline, 
  UpOutline,      // 替换RiseOutlined
  UserOutline     // 替换UserAddOutline
} from 'antd-mobile-icons';

// 正确：统一使用PC端图标
import { 
  HomeOutlined, 
  UserOutlined, 
  RiseOutlined,   // PC端存在
  UserAddOutlined // PC端存在
} from '@ant-design/icons';
```

## 快速检查清单

### 开发前检查
- [ ] 确认项目类型（PC端/移动端）
- [ ] 选择对应的图标包
- [ ] 检查图标是否存在
- [ ] 准备替换方案

### 开发中检查
- [ ] 使用正确的导入方式
- [ ] 图标名称大小写正确
- [ ] 避免混用不同包的图标
- [ ] 为图标添加适当的样式

### 开发后检查
- [ ] 图标显示正常
- [ ] 样式符合设计要求
- [ ] 无障碍属性完整
- [ ] 性能影响最小

## 紧急替换方案

当遇到图标不存在时，使用以下通用图标：

```typescript
// 移动端通用图标
import {
  QuestionCircleOutline,  // 通用问号
  AppOutline,             // 通用应用
  ToolOutline,            // 通用工具
  SettingOutline,         // 通用设置
  UserOutline,            // 通用用户
} from 'antd-mobile-icons';

// PC端通用图标
import {
  QuestionCircleOutlined, // 通用问号
  AppstoreOutlined,       // 通用应用
  ToolOutlined,           // 通用工具
  SettingOutlined,        // 通用设置
  UserOutlined,           // 通用用户
} from '@ant-design/icons';
```

## 更新日志

- 2024-01-XX: 初始版本
- 添加常用图标对照
- 添加错误示例和正确示例
- 添加快速检查清单
- 添加紧急替换方案