SVG图标不随文字变色的根源在于引入方式与样式继承：仅内联SVG支持currentColor，需清除所有内联fill/stroke并设于图形元素上，且父容器必须定义color。
SVG图标不随文字变色？先确认是不是内联写法
不是所有 SVG 都能响应 currentColor。只有内联 SVG（即把 <svg></svg> 整段代码直接贴进 HTML）才支持 CSS 控制 fill/stroke；用 <img src="icon.svg"> 或 background-image: url(icon.svg) 引入的，currentColor 完全无效——浏览器把它当图片处理，CSS 无法穿透。
常见错误现象：color: red 写了，文字红了，图标还是黑的。大概率就是用了 <img> 标签。
- ✅ 正确做法：复制 SVG 源码（含
<path>、<circle>等），粘贴进 HTML，不要包装成独立文件 - ❌ 错误做法：用
<use href="sprite.svg#icon">引用外部文件——即使同域，也断开 CSS 继承链 - ⚠️ 注意：某些构建工具（如 Webpack 的
svg-url-loader）默认转成 data URL，仍属“外部资源”，不继承currentColor
fill="currentColor" 写在哪？别只塞在 <svg> 标签上
currentColor 不会自动透传给子元素。你给 <svg> 设了 fill="currentColor"，但内部 <path> 有硬编码的 fill="#000"，那它就永远是黑的。
实操建议分两步走：
立即学习“前端免费学习笔记（深入）”；
- 删干净所有内联颜色属性：打开 SVG 源码，删掉所有
fill="..."、stroke="..."，包括<svg>和所有子标签里的 - 显式作用到图形元素：用 CSS 或内联方式，把
fill="currentColor"写在<path>、<circle>、<rect>上，或者统一加规则：svg path, svg circle, svg rect { fill: currentColor; } - 别漏描边：如果图标有轮廓线，
stroke同样要设为currentColor，否则只有填充变色，边框卡死
父容器没设 color，currentColor 就是空值
currentColor 是个“继承值”，不是魔法。它严格依赖父元素的 color 计算结果。如果包裹 SVG 的 <div>、<button> 或 <a> 没定义 color，或被其他样式重置为 color: inherit 且上级也没定义，那图标就会回退到浏览器默认色（通常是黑色）。
典型场景：
- 按钮 hover 变色，但图标不动 → 检查是否只写了
button:hover { color: blue; }，却忘了给默认态设color - 用 CSS 变量控制主题色，但变量没生效 → 确保
--icon-color定义在:root或 SVG 父容器上，不能只写在<svg style="--icon-color: red">里（内联 style 不透传） - 伪元素
::before插入 SVG →content: url()创建的是隔离上下文，currentColor失效，必须改用内联 SVG +display: inline-block替代
兼容性与深色模式适配要点
currentColor 在 IE9+、所有现代浏览器都支持，但和 CSS 变量组合时要注意：IE11 支持 currentColor，但不支持 var(--c)，所以 fill: var(--icon-color, currentColor) 这种降级写法很实用。
深色模式下想自动切换，别靠 JS 监听 prefers-color-scheme 去改 class——直接用媒体查询：
html { color: #333; }
@media (prefers-color-scheme: dark) {
html { color: #eee; }
}
svg path { fill: currentColor; }
这样只要根节点 color 变了，所有内联 SVG 图标立刻同步。最容易被忽略的一点：很多 UI 库（如 Element Plus、Ant Design）的图标组件默认禁用内联 SVG，而是用字体或雪碧图，这种情况下 currentColor 机制根本跑不起来，得看文档是否提供 “inline mode” 开关。
