230 lines
7.1 KiB
Markdown
230 lines
7.1 KiB
Markdown
# 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: 初始版本，包含常用图标对照
|
||
- 后续根据实际使用情况持续更新 |