内联 svg 中需删除所有 fill/stroke 内联属性，再通过 css 设置 svg path, circle { fill: currentcolor } 才生效；非内联方式（如 img 或 background）不支持 currentcolor。
必须用内联 SVG，且所有 fill 和 stroke 属性得从 HTML 标签里删干净，否则 currentColor 无效。
为什么 fill: currentColor 没生效
常见错误是直接复制粘贴图标代码，里面还带着 fill="#333" 或 stroke="black" 这类内联属性。浏览器按“内联样式 > CSS”优先级处理，你写的 fill: currentColor 根本没机会覆盖。
- 检查 SVG 根标签（
<svg></svg>）和所有子元素（<path></path>、<circle></circle>等）是否还有fill或stroke属性，有就全删掉 - 确保父容器设置了
color值，哪怕只是color: inherit；如果父容器没定义color，currentColor会回退到浏览器默认黑色 - 如果图标用了
<use></use>引用外部<symbol></symbol>，得去源<symbol></symbol>里也清空fill，并改成fill="currentColor"
怎么写才真正生效
只给 <svg></svg> 设 fill: currentColor 是不够的——SVG 渲染时，每个图形元素（<path></path>、<rect></rect> 等）要单独继承 fill 值，不能靠容器透传。
- 推荐写法：
svg path, svg circle, svg rect, svg polygon { fill: currentColor; } - 描边也要同步：
svg path, svg circle { stroke: currentColor; } - 如果用 Tailwind，直接加
class="fill-current"，但它只作用于 SVG 元素本身，不自动透传到内部<path></path>，所以仍需先清空内联fill - 避免用
content: url()放在伪元素里，这种场景currentColor完全不可用
多色图标或局部固定色怎么办
想让部分路径保持品牌红、另一部分随文字变色？可以混用：清除所有内联颜色后，在 CSS 里对特定 <path></path> 单独设 fill: #e53935，它不会受 currentColor 影响。
- 例如：
svg .brand-path { fill: #e53935; }+svg path:not(.brand-path) { fill: currentColor; } - 注意：不要依赖
inherit替代currentColor，当父元素color: inherit时，inherit可能链式失效，而currentColor会稳稳回退到初始color计算值 - 暗色模式下，只要父容器的
color跟着媒体查询变了，图标就自动变，不用额外写@media (prefers-color-scheme: dark)
最容易被忽略的一点：SVG 必须是内联 HTML，不是 <img src="icon.svg">，也不是 CSS background-image——这两种方式完全隔离样式上下文，currentColor 在那里连影子都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
