75 lines
2.4 KiB
Markdown
75 lines
2.4 KiB
Markdown
# 图标资源说明
|
||
|
||
✅ 页面图标已生成完成（SVG 格式）
|
||
|
||
## TabBar 图标（需要手动添加 PNG 格式，81x81px）
|
||
|
||
由于微信小程序 TabBar 只支持 PNG 格式，需要手动创建以下图标：
|
||
|
||
- `tab-heart.png` - 遇见（未选中，灰色 #999999）
|
||
- `tab-heart-active.png` - 遇见（选中，紫色 #914584）
|
||
- `tab-compass.png` - 广场（未选中）
|
||
- `tab-compass-active.png` - 广场（选中）
|
||
- `tab-message.png` - 消息（未选中）
|
||
- `tab-message-active.png` - 消息（选中）
|
||
- `tab-user.png` - 我的（未选中）
|
||
- `tab-user-active.png` - 我的（选中）
|
||
|
||
### 快速生成 TabBar 图标方法：
|
||
1. 访问 https://lucide.dev/icons/
|
||
2. 搜索对应图标（heart, compass, message-circle, user）
|
||
3. 下载 SVG 后使用在线工具转换为 PNG
|
||
4. 推荐工具：https://svgtopng.com/
|
||
|
||
## 页面图标（SVG 格式推荐）
|
||
- `icon-bell.svg` - 通知铃铛
|
||
- `icon-chevron-left.svg` - 左箭头
|
||
- `icon-chevron-right.svg` - 右箭头
|
||
- `icon-chevron-down.svg` - 下箭头
|
||
- `icon-heart.svg` - 爱心（空心）
|
||
- `icon-heart-filled.svg` - 爱心（实心）
|
||
- `icon-voice.svg` - 语音/声波
|
||
- `icon-check.svg` - 勾选
|
||
- `icon-refresh.svg` - 刷新
|
||
- `icon-lock.svg` - 锁
|
||
- `icon-grass.svg` - 青草/植物
|
||
- `icon-plus.svg` - 加号
|
||
- `icon-more.svg` - 更多（三个点）
|
||
- `icon-comment.svg` - 评论
|
||
- `icon-headphones.svg` - 耳机
|
||
- `icon-search.svg` - 搜索
|
||
- `icon-mic.svg` - 麦克风
|
||
- `icon-star.svg` - 星星
|
||
- `icon-verified.svg` - 认证标识
|
||
- `icon-phone.svg` - 电话
|
||
- `icon-back.svg` - 返回
|
||
- `icon-keyboard.svg` - 键盘
|
||
- `icon-emoji.svg` - 表情
|
||
- `icon-send.svg` - 发送
|
||
- `icon-settings.svg` - 设置
|
||
- `icon-camera.svg` - 相机
|
||
- `icon-eye.svg` - 眼睛
|
||
- `icon-gift.svg` - 礼物
|
||
- `icon-order.svg` - 订单
|
||
- `icon-help.svg` - 帮助
|
||
- `icon-feedback.svg` - 反馈
|
||
- `icon-info.svg` - 信息
|
||
|
||
## 图标颜色建议
|
||
- 未选中状态：#999999
|
||
- 选中状态：#914584（主题紫色）
|
||
- 白色图标：#FFFFFF
|
||
|
||
## 获取图标
|
||
可以从以下网站获取免费图标：
|
||
1. [Lucide Icons](https://lucide.dev/) - 推荐，与 React 版本一致
|
||
2. [Heroicons](https://heroicons.com/)
|
||
3. [Feather Icons](https://feathericons.com/)
|
||
4. [阿里巴巴矢量图标库](https://www.iconfont.cn/)
|
||
|
||
## 快速生成方法
|
||
1. 访问 https://lucide.dev/icons/
|
||
2. 搜索对应图标名称
|
||
3. 下载 SVG 格式
|
||
4. 修改颜色后保存到此目录
|