不能靠统一改--icon-size等带单位变量协调多套图标库，因单位、默认值、作用域和继承链不同；应使用无单位--icon-scale抽象层，在各库容器中映射为对应变量或calc计算。
不能靠统一改 --icon-size 这类带单位的变量来协调多套图标库——它们的单位、默认值、作用域和继承链完全不同，硬统一只会覆盖失效或尺寸错乱。
为什么直接复用 --icon-size 会失效
Font Awesome 7 的 --fa-icon-size 默认是 1em，css.gg 的 --css-gg-size 默认是 24px，而你自定义的 --icon-size: 16px 是绝对值。三者混用时：
• px 值绕过 font-size 继承，无法响应缩放
• 不同前缀变量在 :root 里互相不感知，改一个不影响另一个
• 某些库（如 css.gg）内部用 transform: scale(var(--ggs, 1))，它只认自己的变量名
用 --icon-scale 抽象层解耦各库实现
真正可控的做法，是把缩放逻辑抽成无单位比例系数，在局部映射到各库实际使用的变量上：
-
:root中只声明--icon-scale: 1.2（不带单位） - 对 Font Awesome 图标容器加类
.fa-container，里面写：.fa-container { --fa-icon-size: calc(var(--icon-scale) * 1em); } - 对 css.gg 图标容器加类
.gg-container，里面写：.gg-container { --ggs: var(--icon-scale); } - 若用内联 SVG，则统一设
width: calc(var(--icon-scale) * 1em); height: calc(var(--icon-scale) * 1em);
媒体查询中改 scale 要注意作用域穿透
在 @media 里改 --icon-scale 时，必须确保它生效的位置覆盖所有图标容器：
- 如果图标嵌套在
.button或.card内部，而这些组件自己设置了font-size，那1em就以该组件字号为基准——这是预期行为，不是 bug - 但若某处用了
!important或高特异性规则覆盖了--icon-scale，缩放就会卡住 - 第三方组件（如 Ant Design 的
Icon）可能封装了内联样式，--icon-scale对它无效，需单独适配
SVG 内联图标必须移除 width/height 属性
这是最容易漏掉的一环：只要 SVG 标签里还写着 width="24" 或 height="24"，CSS 变量就完全失效——浏览器优先采用内联宽高，calc() 结果被忽略。
- 构建阶段用 SVGR 或脚本自动清理 SVG 的
width/height属性 - 保留
viewBox，并确保根元素有class="icon"类 - CSS 中强制重置：
.icon { width: 1em; height: 1em; fill: currentColor; }
最难的不是写几个变量，而是搞清每个图标在哪一级继承了哪个 font-size，又在哪一层被哪个 transform 或内联属性截断了。缩放失灵时，先检查 computed styles 里的 width 值来源，再逆向追踪变量作用域链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
