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