# 项目图标清单

> 本项目需要从 https://www.iconfont.cn/ 下载以下图标

## 📋 图标清单

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

| 图标名称 | 文件名 | 颜色（未选中） | 颜色（选中） | 尺寸 |
|---------|--------|--------------|------------|------|
| 首页 | home.png | #94A3B8 | #6366F1 | 48x48 px |
| 首页激活 | home-active.png | - | #6366F1 | 48x48 px |
| 我的 | profile.png | #94A3B8 | #6366F1 | 48x48 px |
| 我的激活 | profile-active.png | - | #6366F1 | 48x48 px |

**搜索关键词：** 首页 / home / 我的 / 用户 / user

---

### 首页图标

| 图标名称 | 文件名 | 尺寸 | 颜色 |
|---------|--------|------|------|
| 搜索 | search.png | 24x24 px | #94A3B8 |
| 位置 | location.png | 24x24 px | #94A3B8 |
| 全部 | all.png | 32x32 px | #6366F1 |
| 餐饮 | restaurant.png | 32x32 px | #6366F1 |
| 酒馆 | bar.png | 32x32 px | #6366F1 |
| 超市 | supermarket.png | 32x32 px | #6366F1 |
| 空状态 | empty.png | 80x80 px | #CBD5E1 |

**搜索关键词：** search / location / grid / food / drink / shop / empty

---

### 个人中心图标

| 图标名称 | 文件名 | 尺寸 | 颜色 |
|---------|--------|------|------|
| 编辑 | edit.png | 24x24 px | #FFFFFF |
| 会员 | vip.png | 32x32 px | #FFFFFF |
| 优惠券 | coupon.png | 32x32 px | #FFFFFF |
| 积分 | points.png | 32x32 px | #FFFFFF |
| 订单 | order.png | 32x32 px | #FFFFFF |
| 地址 | location.png | 24x24 px | #64748B |
| 收藏 | favorite.png | 24x24 px | #64748B |
| 帮助 | help.png | 24x24 px | #64748B |
| 设置 | settings.png | 24x24 px | #64748B |
| 右箭头 | arrow-right.png | 20x20 px | #CBD5E1 |

**搜索关键词：** edit / VIP / ticket / coin / list / map / heart / question / settings / arrow

---

### 店铺详情图标

| 图标名称 | 文件名 | 尺寸 | 颜色 |
|---------|--------|------|------|
| 电话 | phone.png | 32x32 px | #FFFFFF |
| 导航 | navigation.png | 32x32 px | #FFFFFF |
| 时间 | clock.png | 24x24 px | #64748B |
| 地址 | location.png | 24x24 px | #64748B |

**搜索关键词：** phone / navigation / clock / map-pin

---

### 优惠券图标

| 图标名称 | 文件名 | 尺寸 | 颜色 |
|---------|--------|------|------|
| 已使用 | check.png | 24x24 px | #10B981 |
| 已过期 | close.png | 24x24 px | #94A3B8 |

**搜索关键词：** check / close

---

## 🎨 颜色规范

| 用途 | 颜色代码 | 说明 |
|------|---------|------|
| 主色 | #6366F1 | 靛蓝色 |
| 辅助色 | #8B5CF6 | 紫色 |
| 未选中 | #94A3B8 | 浅灰色 |
| 次要文字 | #64748B | 灰色 |
| 辅助文字 | #94A3B8 | 更浅灰色 |
| 边框 | #CBD5E1 | 极浅灰色 |
| 背景 | #F8FAFC | 极浅蓝灰 |

---

## 📥 下载步骤

### 方法一：使用 Iconfont

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

### 方法二：使用其他图标库

#### Remix Icon（推荐）
- 网址：https://remixicon.com/
- 风格：简约线条
- 格式：SVG（可转PNG）
- 免费：✅

#### Heroicons
- 网址：https://heroicons.com/
- 风格：现代简约
- 格式：SVG（可转PNG）
- 免费：✅

#### Tabler Icons
- 网址：https://tabler-icons.io/
- 风格：线条图标
- 格式：SVG（可转PNG）
- 免费：✅

---

## 🔧 图标处理

### 调整颜色
1. 下载 SVG 格式
2. 使用在线工具或设计软件调整颜色
3. 导出为 PNG 格式
4. 确保背景透明

### 调整尺寸
- 导出时设置对应尺寸
- 确保清晰度（2x 或 3x）
- 保持背景透明

### 批量处理
推荐工具：
- 在线转换：https://convertio.co/zh/
- Sketch / Figma
- Adobe Illustrator

---

## ⚠️ 注意事项

1. **命名规范：** 严格按照文件名清单命名
2. **格式要求：** PNG格式，透明背景
3. **尺寸要求：** 按照清单中的尺寸导出
4. **颜色准确：** 使用指定的颜色代码
5. **风格统一：** 保持所有图标风格一致（建议线性图标）

---

## 📦 临时方案

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

### 1. 使用占位色块
```css
background: #6366F1;
border-radius: 50%;
```

### 2. 使用纯色图标
创建简单的纯色圆形或方形作为临时图标

### 3. 使用文字替代
```html
<text style="font-size: 40rpx;">🏠</text>
```

---

## ✅ 检查清单

- [ ] 底部导航栏图标（4个）
- [ ] 首页图标（7个）
- [ ] 个人中心图标（10个）
- [ ] 店铺详情图标（4个）
- [ ] 优惠券图标（2个）

**总计：27 个图标**

---

## 📞 帮助

如有问题，请参考：
- Iconfont 帮助文档
- 在线图标转换工具
- 设计工具使用教程

---

**最后更新：** 2025-01-24