Files
sundynix-pets/pets-fe/components/pt-icon/index.wxss
T
Blizzard b4a4a4b3c0 feat(fe): 引入线性图标体系,tabBar 去 emoji,清掉 172KB 死资源
图标不走字体走 mask-image。Tabler 的 outline 图标是 stroke+fill:none,
字形只认填充轮廓,直接转字体会生成空字形——真机表现和「字体没加载」
一模一样,很容易往错方向排查。mask 走渲染 alpha,描边正常参与,
同样支持 currentColor 染色,没有这个坑。

- styles/iconfont.wxss:38 个图标内联 base64,19.9KB
- components/pt-icon:name 支持图标名 / 记录类型 / 老数据里的 emoji,
  三层降级兜底,绝不留空白;virtualHost 避免多一层节点破坏 flex
- custom-tab-bar:🏠📅✍️📊🐾 换成图标,顺手把抄了一遍的三个色值换回 var()
- project.config.json:packOptions.ignore 排掉 preview.html、6 个候选 logo
  等 172KB 死资源,之前它们全打进包里

preview-v2.html 是设计验证页,本身也不参与打包。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-29 10:28:48 +08:00

18 lines
566 B
Plaintext

/* 图标资源在组件内 import:这样 mask 定义和用它的节点在同一个样式作用域,
不受组件样式隔离影响,custom-tab-bar 这种没开 addGlobalClass 的地方也能直接用。 */
@import "../../styles/iconfont.wxss";
.pt-i {
display: inline-block;
flex: none;
background-color: currentColor;
-webkit-mask-image: var(--m);
mask-image: var(--m);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}