1.3 KiB
1.3 KiB
图标转换说明
问题
微信小程序 TabBar 图标只支持 PNG 格式，不支持 SVG。
解决方案
方法一：在线转换（推荐）
- 访问 https://svgtopng.com/ 或 https://cloudconvert.com/svg-to-png
- 上传 SVG 文件
- 设置输出尺寸为 81x81 像素
- 下载 PNG 文件并替换到 static/icons/ 目录
方法二：使用设计工具
- 使用 Figma / Sketch / PS 打开 SVG
- 导出为 81x81 像素的 PNG
- 保存到 static/icons/ 目录
方法三：使用命令行工具
安装 sharp 或 imagemagick：
# 使用 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（主题色）
图标设计规范
- 图标尺寸：81x81 像素
- 安全区域：边距 10 像素
- 图标风格：线性或填充图标
- 背景：透明