直接用 fill: currentColor 即可实现 SVG 图标颜色随文本色变化，但需满足三个前提：SVG 内联、无内联 fill 覆盖、fill 作用于 path 等具体图形元素；color: red 对 SVG 无效因其填充由 fill 控制，非 color 属性。
直接用 fill: currentColor 就行，但必须满足三个前提：SVG 内联、无内联 fill 值覆盖、fill 作用到具体图形元素（如 path）上。
为什么 color: red 对 SVG 图标没反应
因为 SVG 的填充由 fill 控制，不是 color。浏览器把 <path></path> 当作图形元素，不继承文本样式。即使父级设了 color: red，<svg></svg> 或 <path></path> 没显式声明 fill，它就按默认黑色渲染。
-
color只影响文本、border-color、text-decoration-color等有限属性，对path、circle无效 - 常见错误：给
<svg></svg>加了color: red，但没配fill: currentColor，图标颜色纹丝不动 - 更隐蔽的坑：用了
background-image: url(icon.svg)或<img src="icon.svg">—— 这类外部引用完全无法被 CSS 控制fill
如何正确设置 fill: currentColor
关键不是“加在哪”，而是“加给谁”和“有没有干扰”。currentColor 是个动态值，等于父级计算后的 color，但它不会自动透传进子图形元素。
- 删掉 SVG 源码里所有硬编码的
fill="xxx"（包括<svg fill="black"></svg>和<path fill="#333"></path>），否则会覆盖 CSS - 给
<svg></svg>加fill: currentColor只是起点，必须同步写svg path, svg circle, svg rect { fill: currentColor; } - 如果图标含描边，别漏掉
stroke: currentColor，否则描边仍为默认色 - 推荐写法：
svg[fill="currentColor"] path { fill: currentColor; }，配合 HTML 中<svg fill="currentColor"></svg>，语义清晰且避免全局污染
伪元素或 <use></use> 场景下 currentColor 失效怎么办
这是规范限制，不是写法问题。伪元素 ::before 里的 content: url(icon.svg) 会创建独立图像上下文，currentColor 无法穿透；<use></use> 引用外部 <symbol></symbol> 时，若 <symbol></symbol> 内部路径没设 fill="currentColor"，继承也会断掉。
- 伪元素场景：放弃
content: url()，改用内联 SVG 并包裹在<span></span>里，再用 CSS 控制 -
<use></use>场景：确保<symbol></symbol>内部所有<path></path>都写fill="currentColor"，且外层容器（如<div class="icon">）设 <code>color，不要只靠<use></use>自身样式 - 深色模式兼容：搭配
@media (prefers-color-scheme: dark)修改:root的color，只要 SVG 用的是fill="currentColor"，就能自动切换
最容易被忽略的一点：fill: currentColor 生效的前提是父级有明确的 color 计算值。如果父级 color 是 inherit 或未定义，currentColor 就会回退到浏览器默认（通常是黑色）。检查时优先看 computed styles 里的 color 值是否真实存在。
