7.0 KiB
7.0 KiB
Ant Design Mobile 图标完整列表
📋 图标分类
🔗 基础图标 (Outline)
AddOutline- 添加AppOutline- 应用ArrowDownOutline- 向下箭头ArrowLeftOutline- 向左箭头ArrowRightOutline- 向右箭头ArrowUpOutline- 向上箭头AudioOutline- 音频BarChartOutline- 柱状图BellOutline- 铃铛BookOutline- 书本CalendarOutline- 日历CameraOutline- 相机CheckOutline- 勾选ClockCircleOutline- 时钟CloseOutline- 关闭DeleteOutline- 删除DownlandOutline- 下载EditSOutline- 编辑EllipsisOutline- 省略号EyeOutline- 眼睛FileOutline- 文件FilterOutline- 筛选FireOutline- 火焰FlagOutline- 旗帜FolderOutline- 文件夹GiftOutline- 礼物HeartOutline- 心形HomeOutline- 首页ImageOutline- 图片LeftOutline- 左箭头LikeOutline- 点赞LinkOutline- 链接LocationOutline- 位置LockOutline- 锁定MailOutline- 邮件MessageOutline- 消息MoreOutline- 更多PayCircleOutline- 支付PhoneOutline- 电话PictureOutline- 图片PlayOutline- 播放PlusOutline- 加号RightOutline- 右箭头ScanOutline- 扫描SearchOutline- 搜索SendOutline- 发送SettingOutline- 设置ShareOutline- 分享ShopbagOutline- 购物袋StarOutline- 星星TeamOutline- 团队ThumbsUpOutline- 点赞TimeOutline- 时间UnlockOutline- 解锁UserOutline- 用户VideoOutline- 视频VoiceOutline- 语音
🎨 填充图标 (Fill)
AddCircleFill- 添加圆形AppFill- 应用填充AudioFill- 音频填充BellFill- 铃铛填充BookFill- 书本填充CalendarFill- 日历填充CameraFill- 相机填充CheckCircleFill- 勾选圆形ClockCircleFill- 时钟圆形CloseCircleFill- 关闭圆形DeleteFill- 删除填充DownlandFill- 下载填充EditSFill- 编辑填充EyeFill- 眼睛填充FileFill- 文件填充FilterFill- 筛选填充FireFill- 火焰填充FlagFill- 旗帜填充FolderFill- 文件夹填充GiftFill- 礼物填充HeartFill- 心形填充HomeFill- 首页填充ImageFill- 图片填充LeftFill- 左箭头填充LikeFill- 点赞填充LinkFill- 链接填充LocationFill- 位置填充LockFill- 锁定填充MailFill- 邮件填充MessageFill- 消息填充MoreFill- 更多填充PayCircleFill- 支付圆形PhoneFill- 电话填充PictureFill- 图片填充PlayFill- 播放填充PlusCircleFill- 加号圆形RightFill- 右箭头填充ScanFill- 扫描填充SearchFill- 搜索填充SendFill- 发送填充SettingFill- 设置填充ShareFill- 分享填充ShopbagFill- 购物袋填充StarFill- 星星填充TeamFill- 团队填充ThumbsUpFill- 点赞填充TimeFill- 时间填充UnlockFill- 解锁填充UserFill- 用户填充VideoFill- 视频填充VoiceFill- 语音填充
📊 图表图标
BarChartOutline- 柱状图LineChartOutline- 折线图PieOutline- 饼图AreaOutline- 面积图RadarOutline- 雷达图ScatterOutline- 散点图
🔧 功能图标
AddOutline- 添加DeleteOutline- 删除EditSOutline- 编辑SearchOutline- 搜索FilterOutline- 筛选SettingOutline- 设置MoreOutline- 更多CloseOutline- 关闭CheckOutline- 勾选
📱 通信图标
MessageOutline- 消息PhoneOutline- 电话MailOutline- 邮件SendOutline- 发送VoiceOutline- 语音VideoOutline- 视频
👥 用户图标
UserOutline- 用户TeamOutline- 团队HeartOutline- 心形LikeOutline- 点赞ThumbsUpOutline- 点赞
🛍️ 商业图标
ShopbagOutline- 购物袋PayCircleOutline- 支付GiftOutline- 礼物StarOutline- 星星
📁 文件图标
FileOutline- 文件FolderOutline- 文件夹ImageOutline- 图片PictureOutline- 图片CameraOutline- 相机
🎵 媒体图标
AudioOutline- 音频VideoOutline- 视频PlayOutline- 播放VoiceOutline- 语音
📅 时间图标
CalendarOutline- 日历ClockCircleOutline- 时钟TimeOutline- 时间
🔒 安全图标
LockOutline- 锁定UnlockOutline- 解锁EyeOutline- 眼睛
📍 位置图标
LocationOutline- 位置FlagOutline- 旗帜
🔗 导航图标
ArrowUpOutline- 向上箭头ArrowDownOutline- 向下箭头ArrowLeftOutline- 向左箭头ArrowRightOutline- 向右箭头LeftOutline- 左箭头RightOutline- 右箭头
🎨 使用示例
基础用法
import { AddOutline, UserOutline, SettingOutline } from 'antd-mobile-icons';
// 在组件中使用
<AddOutline />
<UserOutline />
<SettingOutline />
自定义样式
import { HeartOutline } from 'antd-mobile-icons';
// 自定义颜色和大小
<HeartOutline style={{ color: '#ff4d4f', fontSize: 24 }} />
在项目中的使用
// 工作台页面示例
const features = [
{
icon: <ThumbsUpOutline style={{ color: "#ff4d4f" }} />,
name: "自动点赞"
},
{
icon: <MessageOutline style={{ color: "#1890ff" }} />,
name: "AI对话助手"
},
{
icon: <BarChartOutline style={{ color: "#531dab" }} />,
name: "AI数据分析"
}
];
📝 注意事项
- 图标命名规则: 所有图标都以
Outline或Fill结尾 - 导入方式: 从
antd-mobile-icons包中导入 - 样式定制: 可以通过
style属性自定义颜色、大小等 - 响应式: 图标支持响应式设计，可以配合 CSS 媒体查询使用
- 可访问性: 图标支持
aria-label等无障碍属性
🔗 相关资源
📊 项目中已使用的图标
工作台页面
ThumbsUpOutline- 自动点赞MessageOutline- AI对话助手SendOutline- 群消息推送TeamOutline- 自动建群ShareOutline- 流量分发AppOutline- AI策略优化BarChartOutline- AI数据分析LineChartOutline- AI销售预测ClockCircleOutline- 朋友圈同步
底部导航
AppOutline- 首页ShopbagOutline- 场景获客PieOutline- 工作台UserOutline- 我的
其他页面
AddOutline- 添加按钮UserAddOutline- 用户添加BellOutline- 通知LoopOutline- 循环/同步TravelOutline- 旅行/任务