fill: currentcolor 无效的主因是 svg 未内联或被内联样式覆盖：img 引入的 svg 不支持 fill；内联 svg 中写死的 fill 值优先级高于 css；svg 根元素未设 fill="currentcolor" 或未全局声明 svg { fill: currentcolor; }；父容器未显式定义 color。
为什么fill: currentColor写了却没反应
不是 CSS 写错了，而是 SVG 根本没进 DOM 或被内联样式锁死：
— <img src="icon.svg"> 引入的 SVG，fill 是非法属性，浏览器直接忽略
— 内联 SVG 中 <path fill="#333"></path> 这类写死值，优先级高于外部 CSS，currentColor 被覆盖
— <svg></svg> 根元素没设 fill="currentColor"，也未在 CSS 中写 svg { fill: currentColor; }，子元素无法继承
— 父容器没显式声明 color（比如只写了 color: inherit 但上层是默认黑色），currentColor 就取到黑色
必须删干净所有内联 fill 和 stroke 属性
常见错误是直接复制粘贴图标代码，里面还带着 fill="#333" 或 stroke="black"。浏览器按“内联样式 > CSS”优先级处理，你写的 fill: currentColor 根本没机会覆盖。
检查点包括：
— <svg></svg> 标签自身是否还有 fill 或 stroke 属性
— 所有子元素（<path></path>、<circle></circle>、<rect></rect>、<polygon></polygon>）是否残留颜色属性
— <defs><style></style></defs> 块里有没有 .cls-1 { fill: #xxx; } 这类规则，也要删掉
— 如果用构建工具（如 SVGR），配置 svgoConfig 自动移除：{ removeAttrs: { attrs: 'fill|stroke' } }
fill: currentColor 必须作用到具体图形元素上
只给 <svg></svg> 设 fill: currentColor 是不够的——SVG 渲染时，每个图形元素要单独继承 fill 值，不能靠容器透传。
推荐写法：
— svg path, svg circle, svg rect, svg polygon { fill: currentColor; }
— 描边同步加：svg path, svg circle { stroke: currentColor; }
— 更稳妥可用属性选择器：svg[fill="currentColor"] path { fill: currentColor; }，配合 HTML 里写 <svg fill="currentColor"></svg>
— Tailwind 用户注意：class="fill-current" 只作用于 <svg></svg> 元素本身，不自动透传到内部 <path></path>，仍需先清空内联 fill
<use></use> 引用 <symbol></symbol> 时的特殊处理
<use href="#home"></use> 默认不继承 currentColor，必须手动透传：
— <symbol></symbol> 定义里所有路径必须是 fill="currentColor" 或无 fill 属性
— 包裹 <use></use> 的 <svg></svg> 必须有 class（如 <svg class="icon"><use href="#home"></use></svg>）
— CSS 写 .icon { fill: currentColor; }，不能只写 .icon svg { fill: currentColor; }（选择器太深）
— 避免写 .icon { color: red; } 后指望 <use></use> 自动变——它不响应父级 color，除非 color 设在 <use></use> 的直接父元素上
最容易被忽略的一点：SVG 必须是内联 HTML，不是 <img src="icon.svg">，也不是 CSS background-image——这两种方式完全隔离样式上下文，currentColor 在那里连影子都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
