font2pic/miniprogram/ICON_FIX.md

小程序图标修复清单

修复时间

2026年2月8日

问题

所有图标在小程序预览中都无法显示

根本原因

1. 使用了相对路径 ../../assets/icons/ 而不是绝对路径
2. 某些图标文件名包含空格（如 icons_idx _32.svg），在某些情况下可能导致路径解析问题

解决方案

1. 图标路径修复

所有图标路径已从相对路径改为绝对路径：

• ❌ 旧: ../../assets/icons/xxx.svg
• ✅ 新: /assets/icons/xxx.svg

2. Logo 更新

• ✅ 右上角 logo 已改用 webicon.png
• 路径: /assets/icons/webicon.png

3. 图标映射

已使用的图标及其用途：

图标文件	用途	位置
webicon.png	应用 Logo	顶部导航栏左上角
font-size-decrease.svg	减小字号	字体大小滑块左侧
font-size-increase.svg	增大字号	字体大小滑块右侧
choose-color.svg	颜色选择器	顶部导航栏右侧
export.svg	导出选项	输入框右侧第一个按钮
export-svg.svg	导出 SVG	输入框右侧第二个按钮
export-png.svg	导出 PNG	输入框右侧第三个按钮
font-icon.svg	字体图标	预览列表、字体树列表项
checkbox.svg	复选框选中状态	所有复选框
expand.svg	展开/收起	字体分类树
selectall.svg	已收藏	收藏按钮（红心）
unselectall.svg	未收藏	收藏按钮（空心）

4. 复选框实现

由于避免使用带空格的文件名，复选框采用了组合方案：

<view class="checkbox-wrapper {{selected ? 'checked' : ''}}">
  <image wx:if="{{selected}}" class="checkbox-icon-sm" src="/assets/icons/checkbox.svg" />
</view>

样式：

.checkbox-wrapper {
  border: 1rpx solid #C9CDD4;  /* 未选中：灰色边框 */
  border-radius: 3rpx;
}

.checkbox-wrapper.checked {
  border-color: #9B6BC2;  /* 选中：紫色边框和背景 */
  background: #9B6BC2;
}

修改的文件

1. index.wxml

   • 所有图标路径更新为绝对路径
   • Logo 改为 webicon.png
   • 复选框结构调整

2. index.wxss

   • 添加 .checkbox-wrapper 样式
   • 添加 .checkbox-wrapper.checked 样式

验证清单

请在微信开发者工具中验证以下内容：

• 顶部 Logo (webicon.png) 正常显示
• 字体大小增减图标正常显示
• 颜色选择图标正常显示
• 导出按钮组图标正常显示（3个按钮）
• 预览列表中的字体图标正常显示
• 预览列表中的复选框正常显示（选中/未选中）
• 字体选择列表中的展开/收起图标正常显示
• 字体选择列表中的字体图标正常显示
• 字体选择列表中的复选框正常工作
• 字体选择列表中的收藏图标正常显示（已收藏/未收藏）
• 已收藏字体列表中的所有图标正常显示

注意事项

1. 路径规范：小程序中使用绝对路径 /assets/icons/xxx.svg 会从项目根目录开始查找
2. SVG 支持：微信小程序的 <image> 组件支持 SVG 格式
3. 文件名：避免使用包含空格的文件名，可能在某些情况下导致问题
4. 图标尺寸：所有图标已按照 Figma 设计稿的尺寸设置 CSS

如果图标仍不显示

1. 清除缓存：微信开发者工具 -> 工具 -> 清除缓存
2. 重新编译：点击"编译"按钮
3. 检查控制台：查看是否有资源加载错误
4. 验证文件：确认 /miniprogram/assets/icons/ 目录下所有图标文件存在