217 lines
6.5 KiB
Plaintext
217 lines
6.5 KiB
Plaintext
# 🎨 图标下载和放置完整指南
|
||
|
||
## 📌 重要说明
|
||
|
||
我无法直接为您下载图标，但我提供了**最快的解决方案**：
|
||
|
||
### ⚡ 5分钟快速方案
|
||
|
||
1. **打开图标下载工具**
|
||
- 双击打开文件：`static/icons/icon-downloader.html`
|
||
- 这是一个网页工具，可以直接点击下载所有图标
|
||
|
||
2. **批量下载图标**
|
||
- 在工具中点击每个"下载"按钮
|
||
- 会跳转到 RemixIcon 网站（免费、无需注册）
|
||
- 点击页面上的"Download"按钮
|
||
- 选择 PNG 格式
|
||
- 调整颜色（见下方颜色指南）
|
||
- 点击下载
|
||
|
||
3. **重命名文件**
|
||
- 下载后按照下方清单重命名
|
||
- 移动到 `static/icons/` 目录
|
||
|
||
---
|
||
|
||
## 🎯 颜色配置指南
|
||
|
||
### 在 RemixIcon 下载时设置颜色
|
||
|
||
| 图标类型 | 颜色代码 | 颜色名称 |
|
||
|---------|---------|---------|
|
||
| 底部导航（未选中） | #94A3B8 | Slate Gray |
|
||
| 底部导航（选中） | #6366F1 | Indigo |
|
||
| 页面内图标 | #64748B | Cool Gray |
|
||
| 白色图标 | #FFFFFF | White |
|
||
| 渐变图标 | #6366F1 | Indigo |
|
||
|
||
**设置步骤：**
|
||
1. 在 RemixIcon 下载页面
|
||
2. 找到 "Color" 输入框
|
||
3. 输入对应颜色代码
|
||
4. 点击 "Download PNG"
|
||
|
||
---
|
||
|
||
## 📋 完整图标清单（27个）
|
||
|
||
### ✅ 必需图标（底部导航）
|
||
|
||
| # | 文件名 | 图标链接 | 尺寸 | 颜色 |
|
||
|---|--------|---------|------|------|
|
||
| 1 | home.png | [下载](https://remixicon.com/icon/home-4-line) | 48px | #94A3B8 |
|
||
| 2 | home-active.png | [下载](https://remixicon.com/icon/home-4-fill) | 48px | #6366F1 |
|
||
| 3 | profile.png | [下载](https://remixicon.com/icon/user-3-line) | 48px | #94A3B8 |
|
||
| 4 | profile-active.png | [下载](https://remixicon.com/icon/user-3-fill) | 48px | #6366F1 |
|
||
|
||
### ✅ 首页图标（7个）
|
||
|
||
| # | 文件名 | 图标链接 | 尺寸 | 颜色 |
|
||
|---|--------|---------|------|------|
|
||
| 5 | search.png | [下载](https://remixicon.com/icon/search-line) | 24px | #94A3B8 |
|
||
| 6 | location.png | [下载](https://remixicon.com/icon/map-pin-2-line) | 24px | #94A3B8 |
|
||
| 7 | all.png | [下载](https://remixicon.com/icon/apps-line) | 32px | #6366F1 |
|
||
| 8 | restaurant.png | [下载](https://remixicon.com/icon/restaurant-2-line) | 32px | #6366F1 |
|
||
| 9 | bar.png | [下载](https://remixicon.com/icon/goblet-line) | 32px | #6366F1 |
|
||
| 10 | supermarket.png | [下载](https://remixicon.com/icon/store-3-line) | 32px | #6366F1 |
|
||
| 11 | empty.png | [下载](https://remixicon.com/icon/inbox-line) | 80px | #CBD5E1 |
|
||
|
||
### ✅ 个人中心图标（10个）
|
||
|
||
| # | 文件名 | 图标链接 | 尺寸 | 颜色 |
|
||
|---|--------|---------|------|------|
|
||
| 12 | edit.png | [下载](https://remixicon.com/icon/edit-line) | 24px | #FFFFFF |
|
||
| 13 | vip.png | [下载](https://remixicon.com/icon/vip-crown-line) | 32px | #FFFFFF |
|
||
| 14 | coupon.png | [下载](https://remixicon.com/icon/coupon-3-line) | 32px | #FFFFFF |
|
||
| 15 | points.png | [下载](https://remixicon.com/icon/coin-line) | 32px | #FFFFFF |
|
||
| 16 | order.png | [下载](https://remixicon.com/icon/file-list-3-line) | 32px | #FFFFFF |
|
||
| 17 | favorite.png | [下载](https://remixicon.com/icon-star-line) | 24px | #64748B |
|
||
| 18 | help.png | [下载](https://remixicon.com/icon/question-line) | 24px | #64748B |
|
||
| 19 | settings.png | [下载](https://remixicon.com/icon/settings-3-line) | 24px | #64748B |
|
||
| 20 | arrow-right.png | [下载](https://remixicon.com/icon/arrow-right-line) | 20px | #CBD5E1 |
|
||
| 21 | location.png | [下载](https://remixicon.com/icon/map-pin-line) | 24px | #64748B |
|
||
|
||
### ✅ 其他图标（6个）
|
||
|
||
| # | 文件名 | 图标链接 | 尺寸 | 颜色 |
|
||
|---|--------|---------|------|------|
|
||
| 22 | phone.png | [下载](https://remixicon.com/icon/phone-line) | 32px | #FFFFFF |
|
||
| 23 | navigation.png | [下载](https://remixicon.com/icon/compass-3-line) | 32px | #FFFFFF |
|
||
| 24 | clock.png | [下载](https://remixicon.com/icon/time-line) | 24px | #64748B |
|
||
| 25 | check.png | [下载](https://remixicon.com/icon/check-line) | 24px | #10B981 |
|
||
| 26 | close.png | [下载](https://remixicon.com/icon/close-line) | 24px | #94A3B8 |
|
||
|
||
---
|
||
|
||
## 🔧 放置位置
|
||
|
||
所有图标下载后，请放置到：
|
||
|
||
```
|
||
d:/Program/vp/static/icons/
|
||
```
|
||
|
||
目录结构应该是这样的：
|
||
|
||
```
|
||
static/
|
||
└── icons/
|
||
├── home.png
|
||
├── home-active.png
|
||
├── profile.png
|
||
├── profile-active.png
|
||
├── search.png
|
||
├── location.png
|
||
├── all.png
|
||
├── restaurant.png
|
||
├── bar.png
|
||
├── supermarket.png
|
||
├── empty.png
|
||
├── edit.png
|
||
├── vip.png
|
||
├── coupon.png
|
||
├── points.png
|
||
├── order.png
|
||
├── favorite.png
|
||
├── help.png
|
||
├── settings.png
|
||
├── arrow-right.png
|
||
├── phone.png
|
||
├── navigation.png
|
||
├── clock.png
|
||
├── check.png
|
||
└── close.png
|
||
```
|
||
|
||
---
|
||
|
||
## ⚡ 最快速方法（5分钟）
|
||
|
||
### 方法1：使用我提供的下载工具（推荐）
|
||
|
||
1. **打开工具**
|
||
```
|
||
双击打开：d:/Program/vp/static/icons/icon-downloader.html
|
||
```
|
||
|
||
2. **批量下载**
|
||
- 点击每个卡片的"下载"按钮
|
||
- 会自动跳转到对应的 RemixIcon 图标页
|
||
- 点击页面上的 Download 按钮
|
||
- 选择 PNG 格式
|
||
- 设置对应颜色（复制颜色代码）
|
||
- 下载并重命名
|
||
|
||
3. **快速设置颜色技巧**
|
||
- 复制颜色代码（如 #94A3B8）
|
||
- 在 RemixIcon 下载页的 Color 框中粘贴
|
||
- 点击 Download PNG
|
||
|
||
### 方法2：使用 command line 批量下载
|
||
|
||
如果您会使用 curl，可以在项目根目录运行：
|
||
|
||
```bash
|
||
# 创建临时下载脚本
|
||
cd static/icons
|
||
|
||
# 下载底部导航图标（示例）
|
||
curl -o home.png "https://cdn.jsdelivr.net/npm/remixicon@3.5.0/icons/HomeLine.svg"
|
||
# 然后用在线工具转换为 PNG
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 图标预览
|
||
|
||
在下载前，您可以在 `icon-downloader.html` 中预览所有图标的效果。
|
||
|
||
---
|
||
|
||
## 💡 备选方案
|
||
|
||
如果暂时不想下载图标，项目会使用：
|
||
- Emoji 表情作为临时图标
|
||
- 不影响项目运行
|
||
- 后续可以随时替换
|
||
|
||
---
|
||
|
||
## ⏱️ 时间估算
|
||
|
||
- **下载工具方案**：5-10 分钟
|
||
- **手动下载**：15-20 分钟
|
||
- **批量脚本**：3-5 分钟（需要技术背景）
|
||
|
||
---
|
||
|
||
## 📞 需要帮助？
|
||
|
||
1. **查看下载工具**
|
||
- 打开 `static/icons/icon-downloader.html`
|
||
- 有详细的图标预览和下载链接
|
||
|
||
2. **查看图标清单**
|
||
- 打开 `static/icons/ICON_CHECKLIST.md`
|
||
- 有完整的图标列表和规格
|
||
|
||
3. **临时方案**
|
||
- 项目会自动使用 emoji 占位
|
||
- 不影响开发测试
|
||
|
||
---
|
||
|
||
**更新时间：** 2025-01-24
|
||
**图标来源：** RemixIcon（免费开源）
|