cunkebao_v3/nkebao/ICON_QUICK_REFERENCE.md

图标快速参考表

快速查找

🔍 按功能查找

功能	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端项目模板

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

移动端项目模板

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

使用示例

基础使用

// 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' }} />

按钮中使用

// 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>

列表中使用

// 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>

常见错误

❌ 错误示例

// 错误：混用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'; // 不存在

✅ 正确示例

// 正确：统一使用移动端图标
import { 
  HomeOutline, 
  UserOutline, 
  UpOutline,      // 替换RiseOutlined
  UserOutline     // 替换UserAddOutline
} from 'antd-mobile-icons';

// 正确：统一使用PC端图标
import { 
  HomeOutlined, 
  UserOutlined, 
  RiseOutlined,   // PC端存在
  UserAddOutlined // PC端存在
} from '@ant-design/icons';

快速检查清单

开发前检查

• 确认项目类型（PC端/移动端）
• 选择对应的图标包
• 检查图标是否存在
• 准备替换方案

开发中检查

• 使用正确的导入方式
• 图标名称大小写正确
• 避免混用不同包的图标
• 为图标添加适当的样式

开发后检查

• 图标显示正常
• 样式符合设计要求
• 无障碍属性完整
• 性能影响最小

紧急替换方案

当遇到图标不存在时，使用以下通用图标：

// 移动端通用图标
import {
  QuestionCircleOutline,  // 通用问号
  AppOutline,             // 通用应用
  ToolOutline,            // 通用工具
  SettingOutline,         // 通用设置
  UserOutline,            // 通用用户
} from 'antd-mobile-icons';

// PC端通用图标
import {
  QuestionCircleOutlined, // 通用问号
  AppstoreOutlined,       // 通用应用
  ToolOutlined,           // 通用工具
  SettingOutlined,        // 通用设置
  UserOutlined,           // 通用用户
} from '@ant-design/icons';

更新日志

• 2024-01-XX: 初始版本
• 添加常用图标对照
• 添加错误示例和正确示例
• 添加快速检查清单
• 添加紧急替换方案