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