SVG图标颜色改不了，90%是因为未内联或内联后保留硬编码fill属性——currentColor仅在内联SVG且无冲突内联样式时生效。
SVG图标颜色改不了，90%是因为没内联，或内联后留了硬编码fill属性——currentColor只在内联 SVG 且无冲突内联样式时才生效。
为什么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就取到黑色
确保 SVG 内联且清理干净内联样式
必须把 SVG 源码完整贴进 HTML，不能靠构建工具自动注入后还保留原始 fill：
- 删掉所有
<path>、<circle>等标签上的fill、stroke属性，只留d、viewBox等结构属性 - 在
<svg>根标签上直接加fill="currentColor"（比写 CSS 更稳妥，兼容 IE11） - 如果用构建工具（如 SVGR），配置
svgoConfig自动移除：{ removeAttrs: { attrs: 'fill|stroke' } } - 检查开发者工具的 Elements 面板，确认路径节点上已没有
fill属性，且 computed 样式里fill确实是rgb(...)而非none或继承来的黑色
:hover 变色必须显式重设 color 值
fill: currentColor 不会自动“响应 hover”，它只是个取值机制；变色动作得由父级 color 驱动：
立即学习“前端免费学习笔记（深入）”；
- 只写
.icon:hover { fill: red; }无效——因为fill不继承，且 hover 时没触发重新计算currentColor - 正确做法是：
.icon { color: #666; }+.icon:hover { color: #007bff; }，再配合svg { fill: currentColor; } - 如果图标含描边（
stroke），同样要加stroke: currentColor，否则填色变了、描边还是黑的 - 多色图标不能全靠
currentColor，给不同<path>加 class，再分别定义 hover 下的fill
用 <use> 引用 sprite 时的特殊处理
<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，除非外层<svg>显式设了fill
最常被忽略的一点：SVG 文件导出时勾选了“Inline styles”，导致即使你手写了 fill="currentColor"，导出工具又自动补回 fill="#000"。务必关掉设计稿导出设置里的内联样式选项，或用 SVGO 扫描清理。
