271 lines
8.4 KiB
Markdown
271 lines
8.4 KiB
Markdown
# 图标快速参考表
|
||
|
||
## 快速查找
|
||
|
||
### 🔍 按功能查找
|
||
|
||
| 功能 | 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: 初始版本
|
||
- 添加常用图标对照
|
||
- 添加错误示例和正确示例
|
||
- 添加快速检查清单
|
||
- 添加紧急替换方案 |