SVG图标颜色不随color变化是因为currentColor未正确继承，需清除内联fill/stroke、确保内联引入、将color设在svg直接父元素上，并验证computed样式中fill为具体色值。
移动端 SVG 图标颜色不随 color 变化，根本不是 CSS 写错了，而是 currentColor 没接上——常见于内联属性残留、引入方式错误或继承链中断。
为什么 color 改了但图标不变色
浏览器渲染时，fill: currentColor 只是“取值”，它不会监听 color 变化；如果图标没变，说明当前计算出的 currentColor 就是黑色（默认值）。典型原因包括：
-
<path fill="#000">这类内联属性未清除，直接覆盖所有 CSS 声明 - 父容器没显式设
color，比如只在body设了，中间某层用了color: inherit但上层是unset，导致继承链断裂 - 用
<img src="icon.svg">引入——外部 SVG 完全无法被 CSS 控制内部 fill -
<use href="#home">时，color没设在<use>的直接父元素上（比如设在<div class="icon-wrapper">上无效，必须设在包裹<use>的那个<svg>上）
必须手动清理 SVG 源码里的 fill/stroke
构建工具（如 SVGR）或图标库（如 Bootstrap Icons）导出的 SVG，常带硬编码颜色。不能靠 CSS 覆盖，得从源头删干净：
- 打开 SVG 源码，逐个删掉
<svg>根标签上的fill、stroke - 删掉所有
<path>、<circle>、<polygon>上的fill和stroke属性（不是改成currentColor，是彻底删） - 如果用了
<defs><style>，也得删掉其中类似.cls-1 { fill: #333 }的规则 - 清理后，给根
<svg>加上fill="currentColor"（比纯 CSS 更稳，兼容旧 WebView）
移动端 currentColor 必须满足的两个条件
iOS Safari 和 Android Chrome 都支持 currentColor，但生效需同时满足：
立即学习“前端免费学习笔记（深入）”；
- SVG 必须是内联写法（即代码直接贴进 HTML），不能是
<img>或<object> -
color必须设在 SVG 的**直接父元素**上，例如：<button class="btn btn-primary"><svg>...</svg>提交</button>—— 因为.btn-primary自带color，所以图标能变白；
但若写成<div class="wrapper"><svg>...</svg></div>，而.wrapper没设color，图标就还是黑的 - 如果图标含描边，记得加
svg * { stroke: currentColor; }，否则填色变了、描边卡死在黑色
验证是否修好了：三步快速排查
别猜，直接看 DevTools 元素面板和计算样式：
- 选中某个
<path>，在 Elements 面板确认它上面**没有**fill属性（不是fill="currentColor"，是压根没有） - 在 Computed 面板里搜
fill，值应为rgb(102, 123, 255)这类具体色值（说明继承成功）；如果是inherit或rgb(0, 0, 0)，说明父级color没传下来 - 临时给父容器加
style="color: tomato;"，图标立刻变红才算通——不变？回去查上一步
最容易被忽略的是：你改了 CSS，但 SVG 源码里还躺着一个 fill="#000"；或者你给外层 div 设了 color，却忘了那个 <svg> 是它的孙子节点，中间隔了一层没设 color 的 <span>。
