1
This commit is contained in:
超级老白兔
@@ -1,274 +1,274 @@
|
||||
# AI图标使用指南
|
||||
|
||||
## 概述
|
||||
|
||||
本文档为AI助手提供标准化的图标选择和使用流程，确保在代码生成时使用正确的图标包和图标名称。
|
||||
|
||||
## AI使用流程
|
||||
|
||||
### 1. 项目类型判断
|
||||
首先判断项目类型：
|
||||
- **PC端项目**: 使用 `@ant-design/icons`
|
||||
- **移动端项目**: 使用 `antd-mobile-icons`
|
||||
|
||||
### 2. 图标查找流程
|
||||
1. 根据功能需求确定图标类型
|
||||
2. 在对应图标包中查找合适的图标
|
||||
3. 如果图标不存在，查找替代方案
|
||||
4. 使用正确的导入语法
|
||||
|
||||
### 3. 代码生成模板
|
||||
|
||||
#### PC端项目模板
|
||||
```typescript
|
||||
import {
|
||||
// 导航类
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
|
||||
// 操作类
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
CopyOutlined,
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
|
||||
// 状态类
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
LoadingOutlined,
|
||||
|
||||
// 方向类
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
ArrowLeftOutlined,
|
||||
|
||||
// 其他
|
||||
MessageOutlined,
|
||||
CalendarOutlined,
|
||||
ClockCircleOutlined,
|
||||
PictureOutlined,
|
||||
FileOutlined,
|
||||
CameraOutlined,
|
||||
QrcodeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
```
|
||||
|
||||
#### 移动端项目模板
|
||||
```typescript
|
||||
import {
|
||||
// 导航类
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
SettingOutline,
|
||||
|
||||
// 操作类
|
||||
AddOutline,
|
||||
EditSOutline,
|
||||
DeleteOutline,
|
||||
CopyOutline,
|
||||
SearchOutline,
|
||||
RefreshOutline,
|
||||
|
||||
// 状态类
|
||||
CheckOutline,
|
||||
CloseOutline,
|
||||
CheckCircleOutline,
|
||||
CloseCircleOutline,
|
||||
ExclamationCircleOutline,
|
||||
InfoCircleOutline,
|
||||
LoadingOutline,
|
||||
|
||||
// 方向类
|
||||
UpOutline,
|
||||
DownOutline,
|
||||
LeftOutline,
|
||||
RightOutline,
|
||||
|
||||
// 其他
|
||||
MessageOutline,
|
||||
CalendarOutline,
|
||||
ClockCircleOutline,
|
||||
PictureOutline,
|
||||
FileOutline,
|
||||
CameraOutline,
|
||||
QrCodeOutline,
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 功能到图标映射
|
||||
|
||||
### 基础功能映射
|
||||
| 功能需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 添加/新建 | PlusOutlined | AddOutline | 通用添加功能 |
|
||||
| 编辑/修改 | EditOutlined | EditSOutline | 编辑功能 |
|
||||
| 删除/移除 | DeleteOutlined | DeleteOutline | 删除功能 |
|
||||
| 复制/克隆 | CopyOutlined | CopyOutline | 复制功能 |
|
||||
| 搜索/查找 | SearchOutlined | SearchOutline | 搜索功能 |
|
||||
| 刷新/重新加载 | ReloadOutlined | RefreshOutline | 刷新功能 |
|
||||
| 设置/配置 | SettingOutlined | SettingOutline | 设置功能 |
|
||||
| 用户/个人 | UserOutlined | UserOutline | 用户相关 |
|
||||
| 首页/主页 | HomeOutlined | HomeOutline | 首页导航 |
|
||||
| 返回/后退 | ArrowLeftOutlined | LeftOutline | 返回功能 |
|
||||
| 关闭/取消 | CloseOutlined | CloseOutline | 关闭功能 |
|
||||
| 确认/确定 | CheckOutlined | CheckOutline | 确认功能 |
|
||||
|
||||
### 状态指示映射
|
||||
| 状态需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 成功/完成 | CheckCircleOutlined | CheckCircleOutline | 成功状态 |
|
||||
| 错误/失败 | CloseCircleOutlined | CloseCircleOutline | 错误状态 |
|
||||
| 警告/注意 | ExclamationCircleOutlined | ExclamationCircleOutline | 警告状态 |
|
||||
| 信息/提示 | InfoCircleOutlined | InfoCircleOutline | 信息提示 |
|
||||
| 加载/等待 | LoadingOutlined | LoadingOutline | 加载状态 |
|
||||
| 时间/等待 | ClockCircleOutlined | ClockCircleOutline | 时间相关 |
|
||||
|
||||
### 方向导航映射
|
||||
| 方向需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 向上/上升 | UpOutlined | UpOutline | 向上方向 |
|
||||
| 向下/下降 | DownOutlined | DownOutline | 向下方向 |
|
||||
| 向左/后退 | LeftOutlined | LeftOutline | 向左方向 |
|
||||
| 向右/前进 | RightOutlined | RightOutline | 向右方向 |
|
||||
|
||||
### 业务功能映射
|
||||
| 业务需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 消息/通知 | MessageOutlined | MessageOutline | 消息功能 |
|
||||
| 日历/日期 | CalendarOutlined | CalendarOutline | 日历功能 |
|
||||
| 图片/照片 | PictureOutlined | PictureOutline | 图片功能 |
|
||||
| 文件/文档 | FileOutlined | FileOutline | 文件功能 |
|
||||
| 相机/拍照 | CameraOutlined | CameraOutline | 相机功能 |
|
||||
| 二维码 | QrcodeOutlined | QrCodeOutline | 二维码功能 |
|
||||
| 微信/社交 | WechatOutlined | WechatOutline | 微信功能 |
|
||||
| 设备/手机 | MobileOutlined | MobileOutline | 设备功能 |
|
||||
| 团队/群组 | TeamOutlined | TeamOutline | 团队功能 |
|
||||
| 订单/购物 | ShoppingOutlined | ShoppingOutline | 订单功能 |
|
||||
| 支付/钱包 | PayCircleOutlined | PayCircleOutline | 支付功能 |
|
||||
|
||||
## 特殊替换规则
|
||||
|
||||
### 移动端不存在的图标替换
|
||||
| 原需求 | 替换方案 | 说明 |
|
||||
|--------|----------|------|
|
||||
| RiseOutlined | UpOutline | 上升趋势 |
|
||||
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
|
||||
| ShareAltOutlined | LinkOutline | 分享功能 |
|
||||
| BarChartOutlined | PieOutline | 图表功能 |
|
||||
| LineChartOutlined | PieOutline | 图表功能 |
|
||||
| UserAddOutlined | UserOutline | 用户添加 |
|
||||
| Progress | 自定义div | 进度条组件 |
|
||||
|
||||
### PC端不存在的图标替换
|
||||
| 原需求 | 替换方案 | 说明 |
|
||||
|--------|----------|------|
|
||||
| AntOutline | HomeOutlined | 蚂蚁图标 |
|
||||
| AppOutline | AppstoreOutlined | 应用图标 |
|
||||
|
||||
## AI代码生成示例
|
||||
|
||||
### 场景1: 移动端列表页面
|
||||
```typescript
|
||||
// AI应该生成的代码
|
||||
import {
|
||||
AddOutline, // 添加按钮
|
||||
EditSOutline, // 编辑按钮
|
||||
DeleteOutline, // 删除按钮
|
||||
CopyOutline, // 复制按钮
|
||||
SearchOutline, // 搜索框
|
||||
RefreshOutline, // 刷新按钮
|
||||
UserOutline, // 用户信息
|
||||
CalendarOutline, // 时间信息
|
||||
UpOutline, // 上升趋势（替换RiseOutlined）
|
||||
} from 'antd-mobile-icons';
|
||||
|
||||
// 使用示例
|
||||
<Button>
|
||||
<AddOutline /> 新建
|
||||
</Button>
|
||||
<Button>
|
||||
<EditSOutline /> 编辑
|
||||
</Button>
|
||||
<Button color="danger">
|
||||
<DeleteOutline /> 删除
|
||||
</Button>
|
||||
```
|
||||
|
||||
### 场景2: PC端管理页面
|
||||
```typescript
|
||||
// AI应该生成的代码
|
||||
import {
|
||||
PlusOutlined, // 添加按钮
|
||||
EditOutlined, // 编辑按钮
|
||||
DeleteOutlined, // 删除按钮
|
||||
CopyOutlined, // 复制按钮
|
||||
SearchOutlined, // 搜索框
|
||||
ReloadOutlined, // 刷新按钮
|
||||
UserOutlined, // 用户信息
|
||||
CalendarOutlined, // 时间信息
|
||||
RiseOutlined, // 上升趋势（PC端存在）
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// 使用示例
|
||||
<Button icon={<PlusOutlined />}>新建</Button>
|
||||
<Button icon={<EditOutlined />}>编辑</Button>
|
||||
<Button icon={<DeleteOutlined />} danger>删除</Button>
|
||||
```
|
||||
|
||||
## 错误检测和修正
|
||||
|
||||
### 常见错误模式
|
||||
1. **混用图标包**: 同时导入PC端和移动端图标
|
||||
2. **使用不存在的图标**: 在移动端使用PC端特有的图标
|
||||
3. **命名错误**: 图标名称大小写错误
|
||||
4. **导入路径错误**: 使用错误的包名
|
||||
|
||||
### 修正策略
|
||||
1. **统一图标包**: 根据项目类型选择单一图标包
|
||||
2. **查找替代**: 使用对照表查找替代图标
|
||||
3. **验证存在**: 确保图标在目标包中存在
|
||||
4. **测试验证**: 在代码中测试图标是否正常显示
|
||||
|
||||
## AI使用检查清单
|
||||
|
||||
### 代码生成前
|
||||
- [ ] 确认项目类型（PC端/移动端）
|
||||
- [ ] 选择对应的图标包
|
||||
- [ ] 根据功能需求选择合适图标
|
||||
- [ ] 检查图标是否存在
|
||||
|
||||
### 代码生成中
|
||||
- [ ] 使用正确的导入语法
|
||||
- [ ] 图标名称大小写正确
|
||||
- [ ] 避免混用不同包的图标
|
||||
- [ ] 为不存在的图标提供替代方案
|
||||
|
||||
### 代码生成后
|
||||
- [ ] 验证图标导入正确
|
||||
- [ ] 检查图标使用语法
|
||||
- [ ] 确保样式设置合理
|
||||
- [ ] 提供使用示例
|
||||
|
||||
## 更新和维护
|
||||
|
||||
- 定期更新图标对照表
|
||||
- 记录新发现的图标差异
|
||||
- 更新替换规则
|
||||
- 优化AI使用流程
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **优先使用语义化图标**: 选择最能表达功能的图标
|
||||
2. **保持一致性**: 在同一项目中保持图标风格一致
|
||||
3. **考虑可访问性**: 为图标添加适当的aria-label
|
||||
4. **性能优化**: 按需导入图标，避免全量导入
|
||||
# AI图标使用指南
|
||||
|
||||
## 概述
|
||||
|
||||
本文档为AI助手提供标准化的图标选择和使用流程，确保在代码生成时使用正确的图标包和图标名称。
|
||||
|
||||
## AI使用流程
|
||||
|
||||
### 1. 项目类型判断
|
||||
首先判断项目类型：
|
||||
- **PC端项目**: 使用 `@ant-design/icons`
|
||||
- **移动端项目**: 使用 `antd-mobile-icons`
|
||||
|
||||
### 2. 图标查找流程
|
||||
1. 根据功能需求确定图标类型
|
||||
2. 在对应图标包中查找合适的图标
|
||||
3. 如果图标不存在，查找替代方案
|
||||
4. 使用正确的导入语法
|
||||
|
||||
### 3. 代码生成模板
|
||||
|
||||
#### PC端项目模板
|
||||
```typescript
|
||||
import {
|
||||
// 导航类
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
|
||||
// 操作类
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
CopyOutlined,
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
|
||||
// 状态类
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
LoadingOutlined,
|
||||
|
||||
// 方向类
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
ArrowLeftOutlined,
|
||||
|
||||
// 其他
|
||||
MessageOutlined,
|
||||
CalendarOutlined,
|
||||
ClockCircleOutlined,
|
||||
PictureOutlined,
|
||||
FileOutlined,
|
||||
CameraOutlined,
|
||||
QrcodeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
```
|
||||
|
||||
#### 移动端项目模板
|
||||
```typescript
|
||||
import {
|
||||
// 导航类
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
SettingOutline,
|
||||
|
||||
// 操作类
|
||||
AddOutline,
|
||||
EditSOutline,
|
||||
DeleteOutline,
|
||||
CopyOutline,
|
||||
SearchOutline,
|
||||
RefreshOutline,
|
||||
|
||||
// 状态类
|
||||
CheckOutline,
|
||||
CloseOutline,
|
||||
CheckCircleOutline,
|
||||
CloseCircleOutline,
|
||||
ExclamationCircleOutline,
|
||||
InfoCircleOutline,
|
||||
LoadingOutline,
|
||||
|
||||
// 方向类
|
||||
UpOutline,
|
||||
DownOutline,
|
||||
LeftOutline,
|
||||
RightOutline,
|
||||
|
||||
// 其他
|
||||
MessageOutline,
|
||||
CalendarOutline,
|
||||
ClockCircleOutline,
|
||||
PictureOutline,
|
||||
FileOutline,
|
||||
CameraOutline,
|
||||
QrCodeOutline,
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 功能到图标映射
|
||||
|
||||
### 基础功能映射
|
||||
| 功能需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 添加/新建 | PlusOutlined | AddOutline | 通用添加功能 |
|
||||
| 编辑/修改 | EditOutlined | EditSOutline | 编辑功能 |
|
||||
| 删除/移除 | DeleteOutlined | DeleteOutline | 删除功能 |
|
||||
| 复制/克隆 | CopyOutlined | CopyOutline | 复制功能 |
|
||||
| 搜索/查找 | SearchOutlined | SearchOutline | 搜索功能 |
|
||||
| 刷新/重新加载 | ReloadOutlined | RefreshOutline | 刷新功能 |
|
||||
| 设置/配置 | SettingOutlined | SettingOutline | 设置功能 |
|
||||
| 用户/个人 | UserOutlined | UserOutline | 用户相关 |
|
||||
| 首页/主页 | HomeOutlined | HomeOutline | 首页导航 |
|
||||
| 返回/后退 | ArrowLeftOutlined | LeftOutline | 返回功能 |
|
||||
| 关闭/取消 | CloseOutlined | CloseOutline | 关闭功能 |
|
||||
| 确认/确定 | CheckOutlined | CheckOutline | 确认功能 |
|
||||
|
||||
### 状态指示映射
|
||||
| 状态需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 成功/完成 | CheckCircleOutlined | CheckCircleOutline | 成功状态 |
|
||||
| 错误/失败 | CloseCircleOutlined | CloseCircleOutline | 错误状态 |
|
||||
| 警告/注意 | ExclamationCircleOutlined | ExclamationCircleOutline | 警告状态 |
|
||||
| 信息/提示 | InfoCircleOutlined | InfoCircleOutline | 信息提示 |
|
||||
| 加载/等待 | LoadingOutlined | LoadingOutline | 加载状态 |
|
||||
| 时间/等待 | ClockCircleOutlined | ClockCircleOutline | 时间相关 |
|
||||
|
||||
### 方向导航映射
|
||||
| 方向需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 向上/上升 | UpOutlined | UpOutline | 向上方向 |
|
||||
| 向下/下降 | DownOutlined | DownOutline | 向下方向 |
|
||||
| 向左/后退 | LeftOutlined | LeftOutline | 向左方向 |
|
||||
| 向右/前进 | RightOutlined | RightOutline | 向右方向 |
|
||||
|
||||
### 业务功能映射
|
||||
| 业务需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 消息/通知 | MessageOutlined | MessageOutline | 消息功能 |
|
||||
| 日历/日期 | CalendarOutlined | CalendarOutline | 日历功能 |
|
||||
| 图片/照片 | PictureOutlined | PictureOutline | 图片功能 |
|
||||
| 文件/文档 | FileOutlined | FileOutline | 文件功能 |
|
||||
| 相机/拍照 | CameraOutlined | CameraOutline | 相机功能 |
|
||||
| 二维码 | QrcodeOutlined | QrCodeOutline | 二维码功能 |
|
||||
| 微信/社交 | WechatOutlined | WechatOutline | 微信功能 |
|
||||
| 设备/手机 | MobileOutlined | MobileOutline | 设备功能 |
|
||||
| 团队/群组 | TeamOutlined | TeamOutline | 团队功能 |
|
||||
| 订单/购物 | ShoppingOutlined | ShoppingOutline | 订单功能 |
|
||||
| 支付/钱包 | PayCircleOutlined | PayCircleOutline | 支付功能 |
|
||||
|
||||
## 特殊替换规则
|
||||
|
||||
### 移动端不存在的图标替换
|
||||
| 原需求 | 替换方案 | 说明 |
|
||||
|--------|----------|------|
|
||||
| RiseOutlined | UpOutline | 上升趋势 |
|
||||
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
|
||||
| ShareAltOutlined | LinkOutline | 分享功能 |
|
||||
| BarChartOutlined | PieOutline | 图表功能 |
|
||||
| LineChartOutlined | PieOutline | 图表功能 |
|
||||
| UserAddOutlined | UserOutline | 用户添加 |
|
||||
| Progress | 自定义div | 进度条组件 |
|
||||
|
||||
### PC端不存在的图标替换
|
||||
| 原需求 | 替换方案 | 说明 |
|
||||
|--------|----------|------|
|
||||
| AntOutline | HomeOutlined | 蚂蚁图标 |
|
||||
| AppOutline | AppstoreOutlined | 应用图标 |
|
||||
|
||||
## AI代码生成示例
|
||||
|
||||
### 场景1: 移动端列表页面
|
||||
```typescript
|
||||
// AI应该生成的代码
|
||||
import {
|
||||
AddOutline, // 添加按钮
|
||||
EditSOutline, // 编辑按钮
|
||||
DeleteOutline, // 删除按钮
|
||||
CopyOutline, // 复制按钮
|
||||
SearchOutline, // 搜索框
|
||||
RefreshOutline, // 刷新按钮
|
||||
UserOutline, // 用户信息
|
||||
CalendarOutline, // 时间信息
|
||||
UpOutline, // 上升趋势（替换RiseOutlined）
|
||||
} from 'antd-mobile-icons';
|
||||
|
||||
// 使用示例
|
||||
<Button>
|
||||
<AddOutline /> 新建
|
||||
</Button>
|
||||
<Button>
|
||||
<EditSOutline /> 编辑
|
||||
</Button>
|
||||
<Button color="danger">
|
||||
<DeleteOutline /> 删除
|
||||
</Button>
|
||||
```
|
||||
|
||||
### 场景2: PC端管理页面
|
||||
```typescript
|
||||
// AI应该生成的代码
|
||||
import {
|
||||
PlusOutlined, // 添加按钮
|
||||
EditOutlined, // 编辑按钮
|
||||
DeleteOutlined, // 删除按钮
|
||||
CopyOutlined, // 复制按钮
|
||||
SearchOutlined, // 搜索框
|
||||
ReloadOutlined, // 刷新按钮
|
||||
UserOutlined, // 用户信息
|
||||
CalendarOutlined, // 时间信息
|
||||
RiseOutlined, // 上升趋势（PC端存在）
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// 使用示例
|
||||
<Button icon={<PlusOutlined />}>新建</Button>
|
||||
<Button icon={<EditOutlined />}>编辑</Button>
|
||||
<Button icon={<DeleteOutlined />} danger>删除</Button>
|
||||
```
|
||||
|
||||
## 错误检测和修正
|
||||
|
||||
### 常见错误模式
|
||||
1. **混用图标包**: 同时导入PC端和移动端图标
|
||||
2. **使用不存在的图标**: 在移动端使用PC端特有的图标
|
||||
3. **命名错误**: 图标名称大小写错误
|
||||
4. **导入路径错误**: 使用错误的包名
|
||||
|
||||
### 修正策略
|
||||
1. **统一图标包**: 根据项目类型选择单一图标包
|
||||
2. **查找替代**: 使用对照表查找替代图标
|
||||
3. **验证存在**: 确保图标在目标包中存在
|
||||
4. **测试验证**: 在代码中测试图标是否正常显示
|
||||
|
||||
## AI使用检查清单
|
||||
|
||||
### 代码生成前
|
||||
- [ ] 确认项目类型（PC端/移动端）
|
||||
- [ ] 选择对应的图标包
|
||||
- [ ] 根据功能需求选择合适图标
|
||||
- [ ] 检查图标是否存在
|
||||
|
||||
### 代码生成中
|
||||
- [ ] 使用正确的导入语法
|
||||
- [ ] 图标名称大小写正确
|
||||
- [ ] 避免混用不同包的图标
|
||||
- [ ] 为不存在的图标提供替代方案
|
||||
|
||||
### 代码生成后
|
||||
- [ ] 验证图标导入正确
|
||||
- [ ] 检查图标使用语法
|
||||
- [ ] 确保样式设置合理
|
||||
- [ ] 提供使用示例
|
||||
|
||||
## 更新和维护
|
||||
|
||||
- 定期更新图标对照表
|
||||
- 记录新发现的图标差异
|
||||
- 更新替换规则
|
||||
- 优化AI使用流程
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **优先使用语义化图标**: 选择最能表达功能的图标
|
||||
2. **保持一致性**: 在同一项目中保持图标风格一致
|
||||
3. **考虑可访问性**: 为图标添加适当的aria-label
|
||||
4. **性能优化**: 按需导入图标，避免全量导入
|
||||
5. **版本兼容**: 注意图标包版本与UI框架版本的兼容性
|
||||
@@ -1,205 +1,205 @@
|
||||
# 详细图标对照表
|
||||
|
||||
## 基础图标对照
|
||||
|
||||
### 导航类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 首页 | HomeOutlined | HomeOutline | ✅ |
|
||||
| 返回 | ArrowLeftOutlined | LeftOutline | ✅ |
|
||||
| 菜单 | MenuOutlined | MenuOutline | ✅ |
|
||||
| 设置 | SettingOutlined | SettingOutline | ✅ |
|
||||
| 用户 | UserOutlined | UserOutline | ✅ |
|
||||
| 个人中心 | UserOutlined | UserOutline | ✅ |
|
||||
|
||||
### 操作类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 添加 | PlusOutlined | AddOutline | ✅ |
|
||||
| 编辑 | EditOutlined | EditSOutline | ✅ |
|
||||
| 删除 | DeleteOutlined | DeleteOutline | ✅ |
|
||||
| 复制 | CopyOutlined | CopyOutline | ✅ |
|
||||
| 保存 | SaveOutlined | SaveOutline | ✅ |
|
||||
| 刷新 | ReloadOutlined | RefreshOutline | ✅ |
|
||||
| 搜索 | SearchOutlined | SearchOutline | ✅ |
|
||||
| 关闭 | CloseOutlined | CloseOutline | ✅ |
|
||||
| 确认 | CheckOutlined | CheckOutline | ✅ |
|
||||
| 取消 | CloseOutlined | CloseOutline | ✅ |
|
||||
|
||||
### 状态类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 成功 | CheckCircleOutlined | CheckCircleOutline | ✅ |
|
||||
| 错误 | CloseCircleOutlined | CloseCircleOutline | ✅ |
|
||||
| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | ✅ |
|
||||
| 信息 | InfoCircleOutlined | InfoCircleOutline | ✅ |
|
||||
| 加载 | LoadingOutlined | LoadingOutline | ✅ |
|
||||
| 等待 | ClockCircleOutlined | ClockCircleOutline | ✅ |
|
||||
|
||||
### 方向类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 向上 | UpOutlined | UpOutline | ✅ |
|
||||
| 向下 | DownOutlined | DownOutline | ✅ |
|
||||
| 向左 | LeftOutlined | LeftOutline | ✅ |
|
||||
| 向右 | RightOutlined | RightOutline | ✅ |
|
||||
| 向上圆形 | UpCircleOutlined | UpCircleOutline | ✅ |
|
||||
| 向下圆形 | DownCircleOutlined | DownCircleOutline | ✅ |
|
||||
|
||||
### 通信类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 消息 | MessageOutlined | MessageOutline | ✅ |
|
||||
| 邮件 | MailOutlined | MailOutline | ✅ |
|
||||
| 电话 | PhoneOutlined | PhoneOutline | ✅ |
|
||||
| 视频 | VideoCameraOutlined | VideoCameraOutline | ✅ |
|
||||
| 语音 | AudioOutlined | AudioOutline | ✅ |
|
||||
|
||||
### 媒体类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 图片 | PictureOutlined | PictureOutline | ✅ |
|
||||
| 文件 | FileOutlined | FileOutline | ✅ |
|
||||
| 文件夹 | FolderOutlined | FolderOutline | ✅ |
|
||||
| 相机 | CameraOutlined | CameraOutline | ✅ |
|
||||
| 二维码 | QrcodeOutlined | QrCodeOutline | ✅ |
|
||||
|
||||
### 时间类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 日历 | CalendarOutlined | CalendarOutline | ✅ |
|
||||
| 时钟 | ClockCircleOutlined | ClockCircleOutline | ✅ |
|
||||
| 历史 | HistoryOutlined | HistoryOutline | ✅ |
|
||||
|
||||
### 数据类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 统计 | BarChartOutlined | BarChartOutline | ✅ |
|
||||
| 饼图 | PieChartOutlined | PieChartOutline | ✅ |
|
||||
| 折线图 | LineChartOutlined | LineChartOutline | ✅ |
|
||||
| 表格 | TableOutlined | TableOutline | ✅ |
|
||||
| 列表 | UnorderedListOutlined | UnorderedListOutline | ✅ |
|
||||
|
||||
## 特殊图标对照
|
||||
|
||||
### 业务相关
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 设备 | MobileOutlined | MobileOutline | ✅ |
|
||||
| 微信 | WechatOutlined | WechatOutline | ✅ |
|
||||
| 群组 | TeamOutlined | TeamOutline | ✅ |
|
||||
| 客户 | UserAddOutlined | UserAddOutline | ❌ |
|
||||
| 订单 | ShoppingOutlined | ShoppingOutline | ✅ |
|
||||
| 支付 | PayCircleOutlined | PayCircleOutline | ✅ |
|
||||
|
||||
### 工具类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 工具 | ToolOutlined | ToolOutline | ✅ |
|
||||
| 配置 | SettingOutlined | SettingOutline | ✅ |
|
||||
| 帮助 | QuestionCircleOutlined | QuestionCircleOutline | ✅ |
|
||||
| 反馈 | MessageOutlined | MessageOutline | ✅ |
|
||||
| 分享 | ShareAltOutlined | ShareOutline | ❌ |
|
||||
|
||||
## 不存在的图标替换方案
|
||||
|
||||
### PC端存在但移动端不存在的图标
|
||||
| PC端图标 | 推荐替换 | 说明 |
|
||||
|----------|----------|------|
|
||||
| UserAddOutlined | UserOutline | 用户添加功能 |
|
||||
| ShareAltOutlined | LinkOutline | 分享功能 |
|
||||
| RiseOutlined | UpOutline | 上升趋势 |
|
||||
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
|
||||
| BarChartOutlined | PieOutline | 图表功能 |
|
||||
| LineChartOutlined | PieOutline | 图表功能 |
|
||||
|
||||
### 移动端存在但PC端不存在的图标
|
||||
| 移动端图标 | 推荐替换 | 说明 |
|
||||
|------------|----------|------|
|
||||
| AntOutline | HomeOutlined | 蚂蚁图标 |
|
||||
| AppOutline | AppstoreOutlined | 应用图标 |
|
||||
|
||||
## 使用规范
|
||||
|
||||
### 1. 导入规范
|
||||
```typescript
|
||||
// PC端项目
|
||||
import {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// 移动端项目
|
||||
import {
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
SettingOutline,
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
### 2. 命名规范
|
||||
- PC端：使用 `Outlined` 后缀
|
||||
- 移动端：使用 `Outline` 后缀
|
||||
- 保持语义化命名
|
||||
|
||||
### 3. 使用建议
|
||||
- 优先使用语义明确的图标
|
||||
- 保持图标风格一致性
|
||||
- 考虑图标在不同尺寸下的清晰度
|
||||
- 为图标添加适当的aria-label
|
||||
|
||||
### 4. 错误处理
|
||||
当图标不存在时：
|
||||
1. 查找语义相近的图标
|
||||
2. 使用通用图标（如QuestionOutlined）
|
||||
3. 考虑使用文字替代
|
||||
4. 创建自定义图标组件
|
||||
|
||||
## 项目中的实际应用
|
||||
|
||||
### 场景获客模块使用的图标
|
||||
```typescript
|
||||
// 移动端项目中的图标使用
|
||||
import {
|
||||
AddOutline, // 添加
|
||||
UpOutline, // 上升趋势（替换RiseOutline）
|
||||
UserOutline, // 用户
|
||||
CalendarOutline, // 日历
|
||||
CopyOutline, // 复制
|
||||
DeleteOutline, // 删除
|
||||
EditSOutline, // 编辑
|
||||
SettingOutline, // 设置
|
||||
SearchOutline, // 搜索
|
||||
RefreshOutline, // 刷新
|
||||
QrCodeOutline, // 二维码
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
### 工作台模块使用的图标
|
||||
```typescript
|
||||
// 移动端项目中的图标使用
|
||||
import {
|
||||
LikeOutline, // 点赞（替换ThumbsUpOutline）
|
||||
LinkOutline, // 链接（替换ShareOutline）
|
||||
PieOutline, // 饼图（替换BarChartOutline/LineChartOutline）
|
||||
UserOutline, // 用户
|
||||
TeamOutline, // 团队
|
||||
MessageOutline, // 消息
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 更新和维护
|
||||
|
||||
1. **定期检查**: 定期检查新版本中新增的图标
|
||||
2. **文档更新**: 及时更新图标对照表
|
||||
3. **团队协作**: 团队成员共享图标使用规范
|
||||
4. **代码审查**: 在代码审查中检查图标使用是否正确
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **包版本**: 确保图标包版本与UI框架版本兼容
|
||||
2. **按需导入**: 避免全量导入图标，影响打包体积
|
||||
3. **样式覆盖**: 可以通过CSS自定义图标样式
|
||||
4. **无障碍**: 为图标添加适当的无障碍属性
|
||||
# 详细图标对照表
|
||||
|
||||
## 基础图标对照
|
||||
|
||||
### 导航类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 首页 | HomeOutlined | HomeOutline | ✅ |
|
||||
| 返回 | ArrowLeftOutlined | LeftOutline | ✅ |
|
||||
| 菜单 | MenuOutlined | MenuOutline | ✅ |
|
||||
| 设置 | SettingOutlined | SettingOutline | ✅ |
|
||||
| 用户 | UserOutlined | UserOutline | ✅ |
|
||||
| 个人中心 | UserOutlined | UserOutline | ✅ |
|
||||
|
||||
### 操作类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 添加 | PlusOutlined | AddOutline | ✅ |
|
||||
| 编辑 | EditOutlined | EditSOutline | ✅ |
|
||||
| 删除 | DeleteOutlined | DeleteOutline | ✅ |
|
||||
| 复制 | CopyOutlined | CopyOutline | ✅ |
|
||||
| 保存 | SaveOutlined | SaveOutline | ✅ |
|
||||
| 刷新 | ReloadOutlined | RefreshOutline | ✅ |
|
||||
| 搜索 | SearchOutlined | SearchOutline | ✅ |
|
||||
| 关闭 | CloseOutlined | CloseOutline | ✅ |
|
||||
| 确认 | CheckOutlined | CheckOutline | ✅ |
|
||||
| 取消 | CloseOutlined | CloseOutline | ✅ |
|
||||
|
||||
### 状态类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 成功 | CheckCircleOutlined | CheckCircleOutline | ✅ |
|
||||
| 错误 | CloseCircleOutlined | CloseCircleOutline | ✅ |
|
||||
| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | ✅ |
|
||||
| 信息 | InfoCircleOutlined | InfoCircleOutline | ✅ |
|
||||
| 加载 | LoadingOutlined | LoadingOutline | ✅ |
|
||||
| 等待 | ClockCircleOutlined | ClockCircleOutline | ✅ |
|
||||
|
||||
### 方向类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 向上 | UpOutlined | UpOutline | ✅ |
|
||||
| 向下 | DownOutlined | DownOutline | ✅ |
|
||||
| 向左 | LeftOutlined | LeftOutline | ✅ |
|
||||
| 向右 | RightOutlined | RightOutline | ✅ |
|
||||
| 向上圆形 | UpCircleOutlined | UpCircleOutline | ✅ |
|
||||
| 向下圆形 | DownCircleOutlined | DownCircleOutline | ✅ |
|
||||
|
||||
### 通信类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 消息 | MessageOutlined | MessageOutline | ✅ |
|
||||
| 邮件 | MailOutlined | MailOutline | ✅ |
|
||||
| 电话 | PhoneOutlined | PhoneOutline | ✅ |
|
||||
| 视频 | VideoCameraOutlined | VideoCameraOutline | ✅ |
|
||||
| 语音 | AudioOutlined | AudioOutline | ✅ |
|
||||
|
||||
### 媒体类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 图片 | PictureOutlined | PictureOutline | ✅ |
|
||||
| 文件 | FileOutlined | FileOutline | ✅ |
|
||||
| 文件夹 | FolderOutlined | FolderOutline | ✅ |
|
||||
| 相机 | CameraOutlined | CameraOutline | ✅ |
|
||||
| 二维码 | QrcodeOutlined | QrCodeOutline | ✅ |
|
||||
|
||||
### 时间类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 日历 | CalendarOutlined | CalendarOutline | ✅ |
|
||||
| 时钟 | ClockCircleOutlined | ClockCircleOutline | ✅ |
|
||||
| 历史 | HistoryOutlined | HistoryOutline | ✅ |
|
||||
|
||||
### 数据类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 统计 | BarChartOutlined | BarChartOutline | ✅ |
|
||||
| 饼图 | PieChartOutlined | PieChartOutline | ✅ |
|
||||
| 折线图 | LineChartOutlined | LineChartOutline | ✅ |
|
||||
| 表格 | TableOutlined | TableOutline | ✅ |
|
||||
| 列表 | UnorderedListOutlined | UnorderedListOutline | ✅ |
|
||||
|
||||
## 特殊图标对照
|
||||
|
||||
### 业务相关
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 设备 | MobileOutlined | MobileOutline | ✅ |
|
||||
| 微信 | WechatOutlined | WechatOutline | ✅ |
|
||||
| 群组 | TeamOutlined | TeamOutline | ✅ |
|
||||
| 客户 | UserAddOutlined | UserAddOutline | ❌ |
|
||||
| 订单 | ShoppingOutlined | ShoppingOutline | ✅ |
|
||||
| 支付 | PayCircleOutlined | PayCircleOutline | ✅ |
|
||||
|
||||
### 工具类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 工具 | ToolOutlined | ToolOutline | ✅ |
|
||||
| 配置 | SettingOutlined | SettingOutline | ✅ |
|
||||
| 帮助 | QuestionCircleOutlined | QuestionCircleOutline | ✅ |
|
||||
| 反馈 | MessageOutlined | MessageOutline | ✅ |
|
||||
| 分享 | ShareAltOutlined | ShareOutline | ❌ |
|
||||
|
||||
## 不存在的图标替换方案
|
||||
|
||||
### PC端存在但移动端不存在的图标
|
||||
| PC端图标 | 推荐替换 | 说明 |
|
||||
|----------|----------|------|
|
||||
| UserAddOutlined | UserOutline | 用户添加功能 |
|
||||
| ShareAltOutlined | LinkOutline | 分享功能 |
|
||||
| RiseOutlined | UpOutline | 上升趋势 |
|
||||
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
|
||||
| BarChartOutlined | PieOutline | 图表功能 |
|
||||
| LineChartOutlined | PieOutline | 图表功能 |
|
||||
|
||||
### 移动端存在但PC端不存在的图标
|
||||
| 移动端图标 | 推荐替换 | 说明 |
|
||||
|------------|----------|------|
|
||||
| AntOutline | HomeOutlined | 蚂蚁图标 |
|
||||
| AppOutline | AppstoreOutlined | 应用图标 |
|
||||
|
||||
## 使用规范
|
||||
|
||||
### 1. 导入规范
|
||||
```typescript
|
||||
// PC端项目
|
||||
import {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// 移动端项目
|
||||
import {
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
SettingOutline,
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
### 2. 命名规范
|
||||
- PC端：使用 `Outlined` 后缀
|
||||
- 移动端：使用 `Outline` 后缀
|
||||
- 保持语义化命名
|
||||
|
||||
### 3. 使用建议
|
||||
- 优先使用语义明确的图标
|
||||
- 保持图标风格一致性
|
||||
- 考虑图标在不同尺寸下的清晰度
|
||||
- 为图标添加适当的aria-label
|
||||
|
||||
### 4. 错误处理
|
||||
当图标不存在时：
|
||||
1. 查找语义相近的图标
|
||||
2. 使用通用图标（如QuestionOutlined）
|
||||
3. 考虑使用文字替代
|
||||
4. 创建自定义图标组件
|
||||
|
||||
## 项目中的实际应用
|
||||
|
||||
### 场景获客模块使用的图标
|
||||
```typescript
|
||||
// 移动端项目中的图标使用
|
||||
import {
|
||||
AddOutline, // 添加
|
||||
UpOutline, // 上升趋势（替换RiseOutline）
|
||||
UserOutline, // 用户
|
||||
CalendarOutline, // 日历
|
||||
CopyOutline, // 复制
|
||||
DeleteOutline, // 删除
|
||||
EditSOutline, // 编辑
|
||||
SettingOutline, // 设置
|
||||
SearchOutline, // 搜索
|
||||
RefreshOutline, // 刷新
|
||||
QrCodeOutline, // 二维码
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
### 工作台模块使用的图标
|
||||
```typescript
|
||||
// 移动端项目中的图标使用
|
||||
import {
|
||||
LikeOutline, // 点赞（替换ThumbsUpOutline）
|
||||
LinkOutline, // 链接（替换ShareOutline）
|
||||
PieOutline, // 饼图（替换BarChartOutline/LineChartOutline）
|
||||
UserOutline, // 用户
|
||||
TeamOutline, // 团队
|
||||
MessageOutline, // 消息
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 更新和维护
|
||||
|
||||
1. **定期检查**: 定期检查新版本中新增的图标
|
||||
2. **文档更新**: 及时更新图标对照表
|
||||
3. **团队协作**: 团队成员共享图标使用规范
|
||||
4. **代码审查**: 在代码审查中检查图标使用是否正确
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **包版本**: 确保图标包版本与UI框架版本兼容
|
||||
2. **按需导入**: 避免全量导入图标，影响打包体积
|
||||
3. **样式覆盖**: 可以通过CSS自定义图标样式
|
||||
4. **无障碍**: 为图标添加适当的无障碍属性
|
||||
5. **性能**: 大量使用图标时注意性能优化
|
||||
@@ -1,230 +1,230 @@
|
||||
# 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: 初始版本，包含常用图标对照
|
||||
# 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: 初始版本，包含常用图标对照
|
||||
- 后续根据实际使用情况持续更新
|
||||
@@ -1,271 +1,271 @@
|
||||
# 图标快速参考表
|
||||
|
||||
## 快速查找
|
||||
|
||||
### 🔍 按功能查找
|
||||
|
||||
| 功能 | 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: 初始版本
|
||||
- 添加常用图标对照
|
||||
- 添加错误示例和正确示例
|
||||
- 添加快速检查清单
|
||||
# 图标快速参考表
|
||||
|
||||
## 快速查找
|
||||
|
||||
### 🔍 按功能查找
|
||||
|
||||
| 功能 | 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: 初始版本
|
||||
- 添加常用图标对照
|
||||
- 添加错误示例和正确示例
|
||||
- 添加快速检查清单
|
||||
- 添加紧急替换方案
|
||||
@@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nkebao Base</title>
|
||||
<style>html{font-size:16px;}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nkebao Base</title>
|
||||
<style>html{font-size:16px;}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user