Files

笔记本里的永平 b1938a76c0 feat: 本次提交更新内容如下

梳理了icon ，增加了layout的loading

2025-07-19 16:10:26 +08:00

7.1 KiB

Raw Blame History

PC端与移动端图标对照文档

概述

本文档记录了PC端（@ant-design/icons）和移动端（antd-mobile-icons）的图标名称对照，以及正确的导入方式。

导入方式

PC端图标 (@ant-design/icons)

import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  // ... 其他图标
} from '@ant-design/icons';

移动端图标 (antd-mobile-icons)

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. 图标替换策略

当某个图标在目标包中不存在时：

查找语义相近的图标
使用通用图标（如QuestionOutlined）
考虑使用文字替代
创建自定义图标组件

实际项目中的使用示例

PC端项目示例

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';

移动端项目示例

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';

注意事项

包依赖: 确保项目中已安装对应的图标包
版本兼容: 注意图标包版本与UI框架版本的兼容性
性能考虑: 按需导入图标，避免全量导入
样式覆盖: 可以通过CSS自定义图标颜色和大小
无障碍: 为图标添加适当的aria-label属性

更新记录

2024-01-XX: 初始版本，包含常用图标对照
后续根据实际使用情况持续更新

7.1 KiB Raw Blame History Unescape Escape

PC端与移动端图标对照文档

概述

导入方式

PC端图标 (@ant-design/icons)

移动端图标 (antd-mobile-icons)

图标对照表

常用图标对照

方向性图标

编辑类图标

通信类图标

媒体类图标

导航类图标

数据展示类图标

反馈类图标

使用建议

1. 项目类型判断

2. 图标选择原则

3. 常见错误避免

4. 图标替换策略

实际项目中的使用示例

PC端项目示例

移动端项目示例

注意事项

更新记录

7.1 KiB

Raw Blame History