内联SVG才能用CSS动态上色，fill + currentColor是最稳组合；硬编码颜色值不灵活，currentColor自动继承父元素color，需删内联fill、确保父容器有color值、描边也设currentColor。
内联SVG才能用CSS动态上色，fill + currentColor 是最稳、最省事的组合，其他方式要么失效，要么绕远路。
为什么fill="currentColor"比硬写#ff0000更可靠
硬编码颜色值会锁死图标颜色，换主题、切暗色模式、适配可访问性设置时全得手动改；而currentColor自动取父元素的color值，只要改一次文字色，图标就跟着变。
- 必须确保 SVG 是内联写在 HTML 里的（不是
- 删掉所有路径上的内联
fill属性，比如 - 父容器要有明确的
color值，哪怕只是color: inherit;，否则currentColor会退到浏览器默认色（通常是黑色） - 如果图标里有描边（
stroke），也得同步设为currentColor，否则填色变了、描边还是黑的，视觉割裂
fill被忽略的常见原因和排查点
明明写了 .icon path { fill: currentColor; } 却没反应，大概率是样式被更高优先级规则压住了，或者 SVG 结构本身挡了路。
-
fill属性写在 SVG 源码里（如!important强制覆盖（不推荐） -
标签上有style="fill: black"这类内联样式，也会干扰子元素继承 - 用了
引用元素加类或样式，它的子元素不会自动继承宿主的color - CSS 选择器没选中目标：检查是否漏了
svg path、svg circle等具体元素，别只写.icon就以为能控制所有图形
配合 hover / 主题切换的最小可行写法
不需要 JS，纯 CSS 就能响应交互和全局状态，关键是把过渡和颜色变更落在同一层。
- 过渡要写在基础状态里：
.icon { color: #666; transition: color 0.2s ease; }，而不是只写在:hover里 - 图标内部路径统一用
fill="currentColor"，不要留空也不要用fill="none"（那会变透明） - 深色模式切换只需改根节点：
@media (prefers-color-scheme: dark) { :root { color: #e2e8f0; } }，所有currentColor图标自动响应 - 双色图标？拆成两个
... ...
真正容易被忽略的是：SVG 不是“图片”，它是 DOM 节点。你得把它当 HTML 元素来查结构、看计算样式、删内联属性——任何想绕过这步直接“套个 class 就变色”的想法，都会在某个深夜的调试中露出破绽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
