# 图标素材准备指南

## Iconfont 下载指南

本文档列出项目所需的图标，请从 https://www.iconfont.cn/ 下载对应图标。

---

## 底部导航栏图标（必须）

### 首页图标
- **搜索关键词：** 首页 / home
- **推荐图标集：** 阿里巴巴图标库 / linear图标
- **尺寸：** 48x48 px
- **颜色：** 灰色 #94A3B8（未选中） / 靛蓝 #6366F1（选中）
- **文件命名：**
  - `home.png` - 未选中状态
  - `home-active.png` - 选中状态

### 我的图标
- **搜索关键词：** 我的 / 用户 / user
- **推荐图标集：** 阿里巴巴图标库 / linear图标
- **尺寸：** 48x48 px
- **颜色：** 灰色 #94A3B8（未选中） / 靛蓝 #6366F1（选中）
- **文件命名：**
  - `profile.png` - 未选中状态
  - `profile-active.png` - 选中状态

---

## 页面内图标（推荐）

### 首页
- 🔍 **搜索图标** - search
- 📍 **位置图标** - location / map
- ⭐ **星星图标** - star / rating

### 个人中心
- 📋 **订单图标** - order / list
- 📍 **地址图标** - location
- ⚙️ **设置图标** - settings
- 💳 **会员图标** - VIP / member
- 🎫 **优惠券图标** - coupon / ticket

### 店铺详情
- 📞 **电话图标** - phone
- 📍 **导航图标** - location / navigation
- 🕐 **时间图标** - clock / time

### 优惠券
- ✓ **勾选图标** - check / success

---

## 下载步骤

1. 访问 https://www.iconfont.cn/
2. 搜索对应关键词（如"首页"）
3. 选择合适的图标
4. 点击下载，选择 PNG 格式
5. 调整颜色和尺寸
6. 保存到 `static/icons/` 目录

---

## 推荐图标集

- **阿里巴巴图标库** - https://www.iconfont.cn/collections/detail?cid=29341
- **Linear Icons** - 简约线条风格
- **Remix Icon** - 现代设计风格
- **Tabbar Icons** - 专门用于底部导航

---

## 颜色配置

| 用途 | 颜色代码 | 说明 |
|------|---------|------|
| 未选中 | #94A3B8 | 浅灰色 |
| 选中 | #6366F1 | 靛蓝色 |
| 主要图标 | #6366F1 | 靛蓝色 |
| 次要图标 | #94A3B8 | 灰色 |
| 装饰图标 | #CBD5E1 | 更浅的灰色 |

---

## 临时方案

如果暂时无法下载图标，可以使用以下方法：

1. **使用在线图标库**
   - Remix Icon: https://remixicon.com/
   - Heroicons: https://heroicons.com/

2. **使用纯色占位图**
   - 创建简单的圆形或方形占位图

3. **使用文字替代**
   - 临时使用文字代替图标