55 lines
1.3 KiB
Markdown
55 lines
1.3 KiB
Markdown
# 图标转换说明
|
||
|
||
## 问题
|
||
微信小程序 TabBar 图标只支持 PNG 格式，不支持 SVG。
|
||
|
||
## 解决方案
|
||
|
||
### 方法一：在线转换（推荐）
|
||
1. 访问 https://svgtopng.com/ 或 https://cloudconvert.com/svg-to-png
|
||
2. 上传 SVG 文件
|
||
3. 设置输出尺寸为 81x81 像素
|
||
4. 下载 PNG 文件并替换到 static/icons/ 目录
|
||
|
||
### 方法二：使用设计工具
|
||
1. 使用 Figma / Sketch / PS 打开 SVG
|
||
2. 导出为 81x81 像素的 PNG
|
||
3. 保存到 static/icons/ 目录
|
||
|
||
### 方法三：使用命令行工具
|
||
安装 sharp 或 imagemagick：
|
||
|
||
```bash
|
||
# 使用 Node.js sharp
|
||
npm install sharp
|
||
node convert-icons.js
|
||
|
||
# 或使用 ImageMagick
|
||
convert home.svg -resize 81x81 home.png
|
||
```
|
||
|
||
## 需要转换的文件
|
||
|
||
| SVG 文件 | 输出 PNG | 尺寸 |
|
||
|----------|----------|------|
|
||
| home.svg | home.png | 81x81 |
|
||
| home-active.svg | home-active.png | 81x81 |
|
||
| cases.svg | cases.png | 81x81 |
|
||
| cases-active.svg | cases-active.png | 81x81 |
|
||
| service.svg | service.png | 81x81 |
|
||
| service-active.svg | service-active.png | 81x81 |
|
||
| user.svg | user.png | 81x81 |
|
||
| user-active.svg | user-active.png | 81x81 |
|
||
|
||
## 配色参考
|
||
|
||
- 未选中颜色：#999999
|
||
- 选中颜色：#D4A574（主题色）
|
||
|
||
## 图标设计规范
|
||
|
||
1. 图标尺寸：81x81 像素
|
||
2. 安全区域：边距 10 像素
|
||
3. 图标风格：线性或填充图标
|
||
4. 背景：透明
|