内联 svg 必须用 fill="currentcolor" 并删除所有硬编码 fill，配合 viewbox 声明和父元素 color 控制颜色；错误做法包括保留原始 fill、漏写 viewbox、在 scoped style 中 @import 图标 css 或对 svg 本身 hover。
内联 SVG 必须用 fill="currentColor"
直接把 SVG 代码粘进 HTML（而不是 <img src="icon.svg"> 或 background-image），才能用 CSS 控制颜色。关键不是写 fill="#333"，而是删掉所有硬编码 fill 属性，统一加上 fill="currentColor"。这样图标颜色就完全继承父元素的 color 值，后续所有颜色控制都靠这个链路。
常见错误包括：
- 保留原始 SVG 中的
fill="black"—— 它会覆盖currentColor，浏览器开发者工具里能看到该属性被划掉 - 漏写
viewBox="0 0 16 16"—— 导致width="1em"拉伸变形，尤其在 Bootstrap Icons 官方图标中必须显式声明 - 在 Vue/React 的
<template></template>里直接贴 SVG 却没检查构建工具是否自动注入了fill—— 某些插件（如 vite-svg-loader）默认会加，需配置defaultImport: 'url'或手动清理
:root 中定义 --icon-color 并透传给 color
CSS 变量本身不作用于 SVG 内部，真正起效的是 color → currentColor 这条继承链。所以你要在 :root 或父容器上设变量，再让父元素的 color 读取它：
:root {
--icon-color: #007bff;
}
.icon-wrapper {
color: var(--icon-color);
}
这样包裹图标的容器一变色，所有 fill="currentColor" 的 SVG 就跟着变。不需要给每个 SVG 单独写 fill: var(--icon-color)，那反而破坏继承逻辑。
注意点：
- 如果父容器本身没设置
color（比如纯div），currentColor会回退到浏览器默认文本色，不是变量值 - 按钮、禁用态输入框等组件可能重置了
color，得确认父级是否真的“透出”了你设的变量值 - 不要在 scoped style 里 @import 图标 CSS —— 字体文件不会加载，变量也无从生效
hover / active 状态下改色要改父元素 color
想实现鼠标悬停时图标变红，不是给 <svg></svg> 加 :hover，而是给它的父容器加：
.icon-button:hover {
color: var(--icon-hover-color);
}
因为 currentColor 是动态继承的，只要父元素 color 一变，SVG 内部立刻响应。这比用 JavaScript 切换 class 更轻量，也避免重复绑定事件。
容易踩的坑：
- 写成
.icon-button svg:hover { fill: red }—— 失效，SVG 本身没有 hover 状态可触发（除非你加了 pointer-events: visible） - 用
filter: brightness()调整颜色 —— 它会干扰color继承，导致图标发灰或过曝 - 在深色模式下忘记同步更新
--icon-color变量 —— 建议用[data-theme="dark"]块统一覆盖整套变量
list-style-image 和 ::marker 不支持 var()
如果你用 list-style-image: url(icon.svg) 或 ::marker 伪元素放图标，CSS 变量对它们完全无效。这类方式引入的 SVG 是外部资源，样式无法穿透。
替代方案只有两个：
- 改用内联 SVG +
<ul></ul>里手写<li> <svg>...</svg> text</li> - 用
<svg><use href="#icon-check"></use></svg>配合<symbol></symbol>定义图标库，再统一控制color
别试图 hack list-style-image 的 URL 字符串拼接变量 —— 浏览器不解析 CSS 变量到 URL 值里，连 attr() 都不支持这种用法。
真正可控的颜色切换，只发生在你能直接操作 DOM 节点或内联 SVG 的场景里；一旦图标脱离样式树（比如 img 标签、背景图、伪元素），变量就断开了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
