SVG在BEM中应抽离为symbol组件，类名仅作用于容器；fill/stroke需用CSS变量（如var(--icon-fill, currentColor)）控制，避免内联值；形态切换宜通过use的href指向不同symbol实现。
SVG元素在BEM中不能直接套用block__element类名
因为SVG不是HTML，<svg>、<path>、<g>等原生标签不支持class的语义继承或样式层叠行为（比如display: block对<g>无效），强行给<path>加icon__arrow--hover类，既难维护，又容易和CSS作用域冲突。
真正可行的做法是：把SVG作为「原子资源」抽离为独立组件，用<symbol>定义 + <use>引用，并让BEM类只作用于包裹容器（如<span class="icon icon--search">）。
-
<symbol>定义统一放在<svg style="position: absolute; width: 0; height: 0;">里，避免渲染干扰 - 每个
<symbol>用id命名，对应BEM块名（如id="icon-search"） -
<use>不带类名，样式全由父容器控制（颜色、尺寸、过渡都走CSS变量或伪类）
如何用CSS变量驱动SVG内部状态（如颜色、描边粗细）
BEM本身不处理内联样式，但SVG的fill、stroke等属性可被CSS变量接管——前提是SVG内联或通过<use>引用时未硬编码这些值。
推荐写法：<path fill="var(--icon-fill, currentColor)" stroke="var(--icon-stroke)" />，再由BEM修饰符控制变量：
立即学习“前端免费学习笔记（深入）”；
.icon {
--icon-fill: currentColor;
--icon-stroke: none;
}
.icon--primary {
--icon-fill: #007bff;
}
.icon--small {
width: 16px;
height: 16px;
}
- 必须用
currentColor兜底，否则color变化时图标不响应 - 避免在
<path>上写fill="#333"，会覆盖CSS变量 -
<use>无法直接设置fill（浏览器限制），所以变量必须定义在<path>层级
当SVG需动态切换形态（如展开/收起箭头）时，别用display: none切路径
常见错误是写两个<path>，用.icon--expanded .path--closed { display: none; }控制显隐。这在BEM下极难维护，且display对SVG子元素支持不稳定（尤其IE/旧Edge）。
更可靠的方式是：用<switch> + systemLanguage或<animateTransform>做声明式切换；但实际项目中，建议用JS切换<use>的xlink:href（或现代href）指向不同<symbol>：
<span class="icon icon--toggle">
<svg aria-hidden="true">
<use href="#icon-chevron-down" />
</svg>
</span>
- 切换时仅替换
href值（如#icon-chevron-up），不操作DOM结构 - 所有
<symbol>保持相同宽高视图框（viewBox），避免布局跳动 - 动画靠
transform: scaleY()或rotate()实现，比切换<path>更轻量
第三方SVG图标库（如Heroicons、Tabler Icons）与BEM混用的坑
这些库默认导出的是带内联class或style的SVG字符串，直接插入HTML会污染BEM命名空间，且fill="currentColor"可能被其自身style覆盖。
安全接入方式只有两种：
- 下载SVG源文件，手动删掉所有
class、style、id属性，只保留viewBox和路径数据，再注入<symbol>池 - 用构建工具（如Webpack的
svg-sprite-loader）自动提取并生成<symbol>，确保输出无冗余属性
切记：任何带fill="#000"或class="st0"的原始SVG，都不能直接进BEM组件树——它已经脱离了CSS变量和修饰符的控制链。
