应使用@each遍历尺寸map生成.font-size、line-height、vertical-align同步缩放的.icon-{size}类；仅用transform:scale会破坏布局流和交互热区，SVG图标需显式控制容器尺寸或background-size。
直接用 @each 遍历尺寸配置 map，配合 font-size 和 line-height 同步缩放，就能生成不同大小的图标类——前提是图标本身是字体图标（如 Icomoon 导出的）；如果是 SVG 或 PNG，得换 sprite 坐标或 background-size 方案，Sass 本身不处理图像解析。
用 @each 遍历尺寸 map 生成 .icon-{size} 类
核心是把尺寸档位抽象成语义化 map，再统一注入到图标基础类上。不要只改 font-size，否则图标和文字基线错位、点击区域不准。
-
$icon-sizes: ("sm": 1rem, "md": 1.25rem, "lg": 1.5rem);—— key 是语义名，value 是带单位的字号 - 每个尺寸必须同步设置
font-size、line-height: 1、vertical-align: middle，避免换行或偏移 - 别在循环里重复声明
font-family或display: inline-block，这些写在基础类.icon里更轻量 - 示例：
@each $size, $fs in $icon-sizes { .icon-#{$size} { font-size: $fs; line-height: 1; vertical-align: middle; } }
为什么不能只靠 transform: scale() 控制图标大小
表面看能“缩放”，但实际破坏布局流和交互热区：父容器无法正确包裹、触摸点击区域仍是原始尺寸、SSR 渲染时可能闪动。
-
transform: scale(0.8)不改变元素盒模型尺寸，width/height仍按原值参与布局计算 - 图标若含伪元素（
::before），transform可能触发层叠上下文，导致遮挡或 z-index 异常 - 在高 DPR 屏幕下，
scale()放大后边缘易模糊，而原生font-size缩放是矢量无损的
SVG 图标怎么适配多尺寸（非字体方案）
Sass 无法读取 SVG 文件宽高，所谓“自动适配”必须依赖构建工具预扫描并输出尺寸变量。硬编码 width/height 值会失去响应性。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
background-size: contain+ 固定容器宽高，让 SVG 自适应填充 - 若需精确控制，得提前生成类似
$svg-sizes: ("home": (width: 24px, height: 24px))的 map，再用@each注入width和height - 注意：Sass 的
image-width()函数已在 Dart Sass 中移除，别在新项目里依赖它 - 路径必须写死或通过构建脚本注入变量，
url("./icons/#{$name}.svg")中的$name不会触发文件系统查找
真正容易被忽略的是字体图标与 SVG 图标的适配逻辑根本不同：前者靠 font-size 天然缩放，后者必须显式控制容器尺寸或 background-size；混用方案会导致维护成本陡增，建议项目初期就明确图标技术选型。
