SVG图标颜色无法修改的根本原因是内联fill/stroke属性优先级高于CSS，且仅内联SVG可被控制；必须清除所有内联颜色属性、确保SVG内联、并为path等子元素显式设置fill: currentColor。
直接改不了——除非你用的是内联 SVG，且清掉了所有内联 fill 和 stroke 属性。其他方式（比如 <img src="icon.svg"> 或 CSS background-image）写的 fill 都不生效，浏览器压根不认。
为什么 fill: red 写了但图标没变色
不是 CSS 写错，是 DOM 结构或属性优先级卡住了：
-
<path fill="#000">这类内联属性优先级高于外部 CSS，必须手动删掉或改成fill="none" - 用了
<img src="icon.svg">—— SVG 在独立文档上下文里，fill不是img的合法 CSS 属性 - 只写了
svg { fill: currentColor; }，但没写path, circle { fill: currentColor; }，子元素不继承 - 父容器没设
color（哪怕只是color: inherit;），currentColor就回退到默认黑色
内联 SVG + currentColor 的三步实操
这是唯一能批量、响应式、无构建依赖地控制颜色的方案：
- 把 SVG 源码完整粘贴进 HTML，确保是
<svg><path></path></svg>形式，不是<img>或<use> - 逐个删掉所有
<svg>、<path>、<circle>上的fill、stroke、style属性（保留viewBox、d、width等结构属性） - CSS 中同时声明：
svg { fill: currentColor; }<br>path, circle, rect, polygon { fill: currentColor; }<br>path, circle, rect { stroke: currentColor; }如果图标只有描边，就只留stroke行
<use> 引用 sprite 时怎么让 currentColor 生效
<use> 默认不透传 currentColor，必须加一层包裹并显式设置：
立即学习“前端免费学习笔记（深入）”；
- HTML 中写成：
<svg class="icon"><use href="#home"/></svg> - CSS 中写：
.icon svg { fill: currentColor; }（不能只写.icon { fill: currentColor; }，因为<svg>才是可填充元素） - 确认
<symbol>里路径没写死fill，要么删掉，要么改成fill="currentColor" - hover 状态写在父容器上：
.btn:hover .icon svg { fill: currentColor; }，再配合.btn:hover { color: #28a745; }
最常被忽略的一点：构建工具（如 SVGR）默认保留导出时的内联 fill，得配 svgoConfig 自动清理；另外，伪元素里用 content: url(icon.svg) 时 currentColor 天然失效，没得绕——只能换内联写法。
