用 $icon-font-map 管理图标码点，需定义静态 map 如 ("home": "e900")，unicode 值必须双反斜杠转义为 "\\e900"，类名拼接用 .icon-#{$name}，@font-face 的路径、family、mime 必须严格对齐，尺寸控制须同步 font-size、line-height、vertical-align。
用 $icon-font-map 管理图标码点，别硬编码 Unicode
图标字体的本质是把字符映射到视觉符号，SCSS 本身不读文件，所以 $icon-font-map 必须是静态 map，比如 ("home": "e900", "user": "e901")。常见错误是写成 "e900"（单反斜杠），这会让 Sass 解析成转义序列；必须写成 "\e900"（双反斜杠），否则伪元素 content 渲染出来是乱码。
不要试图在 @each 循环里调用 file-exists() 或拼接路径判断图标是否存在——这些函数不触发 I/O，纯属无效操作。map 是构建工具（如 Vite 插件）扫描 icons/ 目录后生成的，不是 Sass 探出来的。
-
$icon-font-map的 key 必须是字符串字面量，写成home: "e900"会报错Undefined variable "home" - 循环体中必须用
content: #{$code}，不能用unquote($code)，否则e900变成普通文本，失去 Unicode 含义 - 类名拼接要带连字符：
.icon-#{$name}，写成.icon#{$name}会输出.iconhome这种非法类名
@font-face 路径、family、MIME 三者必须咬死对齐
哪怕 @each 写得再精准，只要这三个地方任一出错，图标就全变方块。关键点在于：路径是相对于最终 CSS 文件，不是 SCSS 源文件；font-family 值必须完全一致（包括引号、大小写、空格）；Web 服务器必须返回正确 MIME 类型（如 font/woff2 对应 .woff2）。
推荐用变量统一管理路径和 family 名，例如：
@font-face {
font-family: "#{$icon-font-family}";
src: url("#{$icon-font-path}/icons.woff2") format("woff2");
}
然后在基础图标类里显式声明：font-family: "#{$icon-font-family}";。别依赖浏览器 fallback，也别省略引号——font-family: my-icons 和 font-family: "my-icons" 在部分浏览器里会被视为不同字体。
尺寸缩放必须同步 font-size、line-height、vertical-align
只改 font-size 会导致图标与文字基线错位、换行异常、点击热区不准。正确做法是用 map 定义语义化尺寸档位，再在 @each 中同步注入三个属性：
@each $size, $fs in $icon-sizes {
.icon-#{$size} {
font-size: $fs;
line-height: 1;
vertical-align: middle;
}
}
注意：line-height: 1 是为了消除行内元素默认的上下空白；vertical-align: middle 是为对齐文本中线。如果项目里已有全局 line-height 重置，这里仍要显式设为 1，避免继承污染。
- 不要用
transform: scale()替代尺寸控制——它破坏布局流，SSR 渲染易闪动，触摸热区仍是原始尺寸 - SVG 图标不适用这套方案，需改用
background-size或内联 SVG + CSS 变量 - 字号单位建议用
rem，便于全局响应式调控
字体族与图标集解耦，避免命名冲突
多个图标集（如 CoreUI + 自定义图标）共存时，font-family 名必须隔离。不能都叫 "iconfont"，否则浏览器按加载顺序覆盖，后加载的会吞掉前者的字符映射。
推荐为每个图标集定义独立变量：
$icon-font-family-coreui: "CoreUI-Icons"; $icon-font-family-custom: "CoreUI-Icons-Custom";
再分别声明 @font-face，并在对应图标类上显式指定 font-family。这样 .icon-coreui-home 和 .icon-custom-user 就互不干扰。
容易被忽略的是：CSS 变量无法穿透 @font-face，所以 font-family 必须硬编码或用 SCSS 变量拼接，不能指望 runtime 通过 var(--icon-family) 切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
