cunkebao_v3/nkebao/ICON_DETAILED_MAPPING.md

详细图标对照表

基础图标对照

导航类

功能	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. 导入规范

// 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. 创建自定义图标组件

项目中的实际应用

场景获客模块使用的图标

// 移动端项目中的图标使用
import {
  AddOutline,        // 添加
  UpOutline,         // 上升趋势（替换RiseOutline）
  UserOutline,       // 用户
  CalendarOutline,   // 日历
  CopyOutline,       // 复制
  DeleteOutline,     // 删除
  EditSOutline,      // 编辑
  SettingOutline,    // 设置
  SearchOutline,     // 搜索
  RefreshOutline,    // 刷新
  QrCodeOutline,     // 二维码
} from 'antd-mobile-icons';

工作台模块使用的图标

// 移动端项目中的图标使用
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. 性能: 大量使用图标时注意性能优化