feat: 本次提交更新内容如下
梳理了icon ，增加了layout的loading
This commit is contained in:
笔记本里的永平
271
nkebao/ICON_QUICK_REFERENCE.md
Normal file
271
nkebao/ICON_QUICK_REFERENCE.md
Normal file
@@ -0,0 +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: 初始版本
|
||||
- 添加常用图标对照
|
||||
- 添加错误示例和正确示例
|
||||
- 添加快速检查清单
|
||||
- 添加紧急替换方案
|
||||
Reference in New Issue
Block a user