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