icon组件bem块名须唯一语义化，推荐ui-icon等项目域命名；尺寸与颜色修饰符须正交分离，如ui-icon--24、ui-icon--success；颜色修饰符应基于设计系统语义而非具体值；内部结构需用__元素隔离并避免全局污染。
Icon组件的BEM块名必须唯一且语义明确
直接用 icon 作块名极易冲突（比如和第三方库、重置样式、或未来 <icon></icon> 自定义元素冲突），推荐按项目域收敛，例如 ui-icon 或 app-icon。Octicons 的 octicon 就是典型实践——它既是命名空间，也是可识别的来源标识。
不建议用 icon、ico、svg-icon 这类泛化或带实现细节的名称，前者缺乏隔离性，后者把技术选型（SVG）写进语义层，后续换成字体图标或 React 组件就尴尬了。
尺寸与颜色必须拆成独立修饰符，不能拼接
BEM 修饰符的核心约束是「正交性」：每个修饰符只表达一个维度的变体。尺寸和颜色属于不同关注点，强行合并如 ui-icon--large-red 会破坏可组合性，也违背 BEM 原则。
-
ui-icon--16、ui-icon--24、ui-icon--32—— 尺寸修饰符，对应固定 width/height 或 font-size -
ui-icon--primary、ui-icon--danger、ui-icon--muted—— 颜色修饰符，只控制 color / fill，不碰尺寸 - 允许同时使用：
<i class="ui-icon ui-icon--24 ui-icon--danger"></i>
注意：CSS 中禁止写 .ui-icon--24.ui-icon--danger 这种组合选择器——它权重高、难调试、漏一个类就失效；应分别定义规则，让它们自然叠加。
颜色修饰符必须基于设计系统语义，而非具体值
ui-icon--red 是反模式：红色可能在不同场景代表“错误”“删除”“强调”，但语义模糊；一旦设计系统改用 #d32f2f 替代 red，这个类名就失去意义，还容易和 button--red 等产生歧义。
应严格对应设计系统中的色板命名：
-
ui-icon--critical（对应 error 状态色） -
ui-icon--success（对应 success 状态色） -
ui-icon--interactive（对应可点击的主色） -
ui-icon--disabled（禁用态，通常走灰阶）
这些修饰符在 CSS 中通过 CSS 变量映射到真实颜色，例如：.ui-icon--critical { color: var(--color-critical); }。这样 JS 控制状态时，只需切换类名，无需关心具体色值。
图标内部结构要用元素（Element）隔离，别污染全局
SVG 图标若含多条路径、组或文字，需用 __ 明确划分内部结构，例如：
<svg class="ui-icon ui-icon--24 ui-icon--success"><path class="ui-icon__checkmark" d="M..."></path><circle class="ui-icon__background" r="12"></circle></svg>
关键点：
-
ui-icon__checkmark和ui-icon__background是元素，只在ui-icon块内有意义 - 避免用
ui-icon--success .checkmark这类依赖标签名或无命名空间的选择器，它无法隔离样式 - 所有尺寸、颜色控制都收口在块级修饰符上，元素类名只用于微调局部（如旋转某条路径）
真正容易被忽略的是：很多团队把 SVG 内联后直接写 fill="currentColor" 就完事，结果发现 ui-icon--24 改了 font-size，但 ui-icon__background 的 r="12" 没缩放——这时就得靠元素级样式补位，而不是靠修饰符硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
