1
This commit is contained in:
@@ -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. **性能**: 大量使用图标时注意性能优化
|
||||
Reference in New Issue
Block a user