From c98758e61b2c30ac2f7f27c9f736588de18301f4 Mon Sep 17 00:00:00 2001 From: wm <2747639460@qq.com> Date: Wed, 22 Jul 2026 23:09:56 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20fc-icon=20=E6=94=B9=E7=94=A8=20SVG=20?= =?UTF-8?q?=E7=9F=A2=E9=87=8F=E5=9B=BE=20+=20image=20=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=EF=BC=8C=E5=BD=BB=E5=BA=95=E8=A7=A3=E5=86=B3=E5=BE=AE=E4=BF=A1?= =?UTF-8?q?=20text=20=E8=87=AA=E5=AE=9A=E4=B9=89=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E4=B8=8D=E6=98=BE=E7=A4=BA=E5=AF=BC=E8=87=B4=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E5=8F=98=E5=AD=97=E7=AC=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 微信小程序 对 @font-face 自定义字体支持不可靠（开发者工具/真机均可能不渲染），图标回退成字符 - 改用 渲染 Lucide SVG 矢量图（data:image/svg+xml），彻底绕开字体加载限制，矢量/可上色 - 新增 utils/icon-svg.js（49 图标内层 SVG，stroke/fill 用 __C__ 占位），fc-icon 按 color 动态拼色 - 内置设计 token→色值映射，调用方传 var(--xxx) 自动解析为具体色值 - 移除 app.wxss 中已无用的 @font-face（字体方案废弃） --- miniprogram/app.wxss | 9 ----- miniprogram/components/fc-icon/index.js | 49 ++++++++++++++++++----- miniprogram/components/fc-icon/index.wxml | 2 +- miniprogram/components/fc-icon/index.wxss | 8 +--- miniprogram/utils/icon-svg.js | 2 + 5 files changed, 44 insertions(+), 26 deletions(-) create mode 100644 miniprogram/utils/icon-svg.js diff --git a/miniprogram/app.wxss b/miniprogram/app.wxss index a83bf0b..120b0b7 100644 --- a/miniprogram/app.wxss +++ b/miniprogram/app.wxss @@ -1,12 +1,3 @@ -/* ===== Lucide 子集 iconfont（动态生成，font-family: fc-icon） ===== */ -@font-face { - font-family: "fc-icon"; - src: url('data:font/ttf;base64,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Y3QuaHR0cDovL2ZvbnRlbGxvLmNvbQBmAGMALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAZgBjAC0AaQBjAG8AbgBmAGMALQBpAGMAbwBuAFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAGMALQBpAGMAbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAAAIAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMQECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4BHwEgASEBIgEjASQBJQEmAScBKAEpASoBKwEsAS0BLgEvATABMQEyAAN6YXAIeC1jaXJjbGUEdXNlcgZ0cm9waHkLdHJlbmRpbmctdXAHdHJhc2gtMgZ0YXJnZXQEc3RhcghzcGFya2xlcxJzbGlkZXJzLWhvcml6b250YWwHc2hhcmUtMghzZXR0aW5ncwZzZWFyY2gJcm90YXRlLWN3CnJlZnJlc2gtY3cEcGx1cwRwbGF5D3BlcnNvbi1zdGFuZGluZwVtZWRhbAdsb2ctb3V0C2xheW91dC1ncmlkBmxheWVycwRpbmZvBWltYWdlBGhvbWUFaGVhcnQIZ3JpZC0yeDILZm9sZGVyLW9wZW4FZmxhbWUGZmlsdGVyCGR1bWJiZWxsCGRvd25sb2FkBWNsb2NrDmNsaXBib2FyZC1saXN0DWNoZXZyb24tcmlnaHQMY2hldnJvbi1kb3duBWNoZWNrDGNoZWNrLWNpcmNsZQhjYWxlbmRhcghib29rbWFyawRiaWtlBGJlbGwFYXdhcmQLYXJyb3ctcmlnaHQKYXJyb3ctbGVmdAxhbGVydC1jaXJjbGUIYWN0aXZpdHkNYWNjZXNzaWJpbGl0eQAAAAA=') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: block; -} - /* ===== FITCOACH 设计系统：动能暗色（Kinetic Dark） ===== 强调色 accent = Volt 荧光绿 #B6F24E（用户拍板）。 为兼容现有页面对 --gold/--teal 等变量名的引用，保留变量名、改其色值为新调色板； diff --git a/miniprogram/components/fc-icon/index.js b/miniprogram/components/fc-icon/index.js index fc7c95c..712542c 100644 --- a/miniprogram/components/fc-icon/index.js +++ b/miniprogram/components/fc-icon/index.js @@ -1,23 +1,54 @@ -const iconMap = require('../../utils/icon-map'); +const iconSvg = require('../../utils/icon-svg'); +// 设计 token 色值映射：调用方常传 var(--xxx)，但 SVG data URI 内无法解析 CSS 变量，需转成具体色值 +const CSS_VARS = { + '--accent': '#B6F24E', + '--accent-hover': '#C7F56E', + '--accent-active': '#9EDB3A', + '--text': '#ECF1EF', + '--text-2': '#9BA7A1', + '--text-3': '#6B7670', + '--danger': '#FF5C5C', + '--success': '#2BD9A6', + '--warn': '#F2B53D', + '--info': '#4FA8FF', +}; +function resolveColor(c) { + if (!c) return '#ECF1EF'; + const m = /^var\((--[\w-]+)\)$/.exec(String(c).trim()); + if (m) return CSS_VARS[m[1]] || '#ECF1EF'; + return c; // 已是具体色值（hex） +} + +// 用 渲染 Lucide SVG 矢量图（微信小程序 自定义字体不可靠，改用此方案 100% 稳定） Component({ properties: { // Lucide 图标名，如 search / dumbbell / heart name: { type: String, value: '' }, - // 字号（rpx） + // 字号（rpx），同时作为图标宽高 size: { type: Number, value: 20 }, - // 颜色，默认跟随当前文字色（currentColor 在 iconfont 下用具体色） + // 颜色：可传具体 hex，或 var(--xxx)（自动解析为对应 token 色值） color: { type: String, value: '' }, }, - data: { glyph: '' }, + data: { src: '' }, observers: { - name(n) { - this.setData({ glyph: (iconMap[n] || '') }); - }, + name(n) { this._build(n, this.data.color); }, + color(c) { this._build(this.data.name, c); }, }, lifetimes: { - attached() { - this.setData({ glyph: (iconMap[this.data.name] || '') }); + attached() { this._build(this.data.name, this.data.color); }, + }, + methods: { + _build(name, color) { + const inner = iconSvg[name]; + if (!inner) { this.setData({ src: '' }); return; } + const stroke = resolveColor(color); + const body = inner.replace(/__C__/g, stroke); + const svg = + '' + + body + ''; + this.setData({ src: 'data:image/svg+xml,' + encodeURIComponent(svg) }); }, }, }); diff --git a/miniprogram/components/fc-icon/index.wxml b/miniprogram/components/fc-icon/index.wxml index 935f35b..ac0df93 100644 --- a/miniprogram/components/fc-icon/index.wxml +++ b/miniprogram/components/fc-icon/index.wxml @@ -1 +1 @@ -{{glyph}} + diff --git a/miniprogram/components/fc-icon/index.wxss b/miniprogram/components/fc-icon/index.wxss index 7e371a0..b297c29 100644 --- a/miniprogram/components/fc-icon/index.wxss +++ b/miniprogram/components/fc-icon/index.wxss @@ -1,10 +1,4 @@ .fc-icon { - font-family: "fc-icon"; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; display: inline-block; + vertical-align: middle; } diff --git a/miniprogram/utils/icon-svg.js b/miniprogram/utils/icon-svg.js new file mode 100644 index 0000000..af4e9e9 --- /dev/null +++ b/miniprogram/utils/icon-svg.js @@ -0,0 +1,2 @@ +// AUTO-GENERATED from lucide-static 1.25.0 — inner SVG markup, stroke/fill use __C__ placeholder +module.exports = {"zap":"","x-circle":"\n \n ","user":"\n ","trophy":"\n \n \n \n \n ","trending-up":"\n ","trash-2":"\n \n \n \n ","target":"\n \n ","star":"","sparkles":"\n \n \n ","sliders-horizontal":"\n \n \n \n \n \n \n \n ","share-2":"\n \n \n \n ","settings":"\n ","search":"\n ","rotate-cw":"\n ","refresh-cw":"\n \n \n ","plus":"\n ","play":"","person-standing":"\n \n \n ","medal":"\n \n \n \n \n ","log-out":"\n \n ","layout-grid":"\n \n \n ","layers":"\n \n ","info":"\n \n ","image":"\n \n ","home":"\n ","heart":"","grid-2x2":"\n \n ","folder-open":"","flame":"","filter":"","dumbbell":"\n \n \n \n ","download":"\n \n ","clock":"\n ","clipboard-list":"\n \n \n \n \n ","circle-x":"\n \n ","chevron-right":"","chevron-down":"","check":"","check-circle":"\n ","calendar":"\n \n \n ","bookmark":"","bike":"\n \n \n ","bell":"\n ","award":"\n ","arrow-right":"\n ","arrow-left":"\n ","alert-circle":"\n \n ","activity":"","accessibility":"\n \n \n \n "};