200 lines
4.7 KiB
Plaintext
200 lines
4.7 KiB
Plaintext
# 项目图标清单
|
||
|
||
> 本项目需要从 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
|