SVG图标颜色不随文字变，90%是因内联fill属性锁死继承链；需删除所有硬编码颜色、fill/stroke属性及defs中style规则，并确保父容器有可继承的color值。
SVG 图标颜色不随文字变，90% 是因为 fill-current 被内联属性锁死，不是类名写错，也不是 Tailwind 配置漏了。
为什么 fill-current 看似写了却没生效
它只是 fill: currentColor 的封装，完全依赖 CSS 继承链。浏览器会优先采用 SVG 内部的 fill="#000" 这类内联值，直接覆盖 CSS 规则。
- 打开 DevTools，选中
<path>，看 Computed 标签下fill的最终值——如果不是currentColor或计算后的颜色，说明被内联值截断了 -
<svg fill="none" stroke="currentColor">这种写法里的fill="none"本身就会阻止继承，必须删掉整个fill属性 - 父容器没设
color值（比如只在<button>上加了text-blue-500，但 SVG 被套在没样式的<span>里），currentColor就回退到body的默认灰
SVG 源码必须手动清理才能用 fill-current
别指望加个类就自动修好。所有硬编码颜色都得从原始 SVG 字符串里删掉或替换。
- 删掉
<svg>标签上的fill、stroke、fill-rule属性（例如<svg fill="none">→ 改成<svg>） - 逐个检查内部元素：
<path fill="#000">、<circle stroke="#999">、<g fill="red">—— 全部删掉这些属性，或统一改成fill="currentColor"/stroke="currentColor" - 删掉
<defs><style>块里的.cls-1 { fill: #xxx; }类规则，它们也会干扰继承 - 确保 SVG 是内联写法（直接贴 HTML 里），不是
<img src="icon.svg">或background-image
描边图标和深色模式下容易漏的关键点
fill-current 只管填充，对描边无效；它也不感知 dark mode，只忠实地继承当前 color 值。
立即学习“前端免费学习笔记（深入）”；
- 描边图标（如 Heroicons outline）必须同时加
stroke-current类（Tailwind v3.3+ 原生支持；v3.0–3.2 需手动扩展theme.extend.stroke） - 深色模式下图标还是黑的？问题不在 SVG，而在你设的文本色是否响应式——别用
text-gray-700，改用text-gray-900 dark:text-gray-100 - Flex 容器中只写
h-5 w-5，SVG 可能被压缩变形，务必加shrink-0 -
viewBox必须保留且合理（如viewBox="0 0 24 24"），否则缩放失真
最常被忽略的是：SVG 内联后，fill-current 生效的前提是父容器有明确且可继承的 color 值——这个值必须经过 CSS 计算得出，不能靠 * { color: ... } 这类通配符间接设置，否则继承链会被劫持。
