最轻量方式是用--icon-color变量在:root或父容器定义，通过color/fill继承；内联SVG需设fill="currentColor"且禁用构建工具重写；伪元素依赖color继承；list-style-image不支持CSS变量，::marker仅部分浏览器支持且不可直接用var()。
用 --icon-color 变量控制列表图标颜色
直接在 :root 或父容器上定义 CSS 变量，再用 color 或 fill 继承它，是最轻量、最易维护的方式。前提是图标得是内联 SVG 或支持 color 传递的伪元素。
- 如果用
::before伪元素 +content: "•"，只能靠color影响，此时变量要作用在父上，伪元素自动继承 - 如果用内联
，需把fill设为var(--icon-color)，且 SVG 不能有硬编码的fill属性（会覆盖变量） - 避免在组件内部写死
fill="#333"—— 这会让变量失效，检查浏览器开发者工具里是否被 strike-through
list-style-image 不响应 CSS 变量
别试了。list-style-image 的值必须是 URL 字符串，没法插变量。就算写成 url("data:image/svg+xml," + var(--svg-data))，浏览器也不认 —— CSS 语法不支持表达式拼接。
- 想动态换图标？改用
::marker（仅部分浏览器支持，Chrome 119+ / Safari 17.4+）或彻底放弃原生列表，用模拟 - 旧项目还在用
list-style-image: url(arrow.png)？那就只能 JS 切换 class，或者生成多套 CSS 规则预设不同颜色版本 - 注意：
::marker里也不能直接用fill: var(--icon-color)（目前规范未允许），得靠color间接影响（仅对某些 marker 类型生效）
React/Vue 里传变量到子组件样式中要绕道
组件库或自定义列表组件里，不能直接把 JS 变量塞进 CSS，得靠属性绑定 + 属性选择器，或注入 style 对象。
- Vue：用
:style="{ '--icon-color': iconColor }"绑定到，CSS 里写li { color: var(--icon-color); } - React：同理，
style={{ '--icon-color': iconColor }}，但注意 SSR 时服务端可能不识别自定义属性，建议加 fallback：color: #666; color: var(--icon-color); - 别在组件顶层用
document.documentElement.style.setProperty全局改 —— 容易污染其他列表，尤其微前端场景下更危险
SVG 图标里 currentColor 是关键桥梁
这是让图标“听从文字颜色”的唯一可靠方式。只要父元素设置了 color，且 SVG 内部用 fill="currentColor"，就能链式响应变量。
- 不要手动把 SVG 导出为
fill="#2563eb"—— 改成fill="currentColor"后，只需改父级color，图标立刻同步 - 用 Webpack/Vite 加载 SVG 时，确保 loader 没把
currentColor替换成具体值（比如@svgr/webpack默认会，需配svgr: { replaceAttrValues: false }） - 检查渲染后的 DOM：如果 SVG 标签里
fill属性消失了，但样式面板显示fill: currentColor，说明成功；如果还留着硬编码值，那就是构建流程篡改了
事情说清了就结束。真正卡住人的，往往不是怎么写变量，而是 SVG 被打包工具重写了 fill，或者伪元素没继承 color —— 这些地方得一层层 inspect 元素 computed styles 才看得见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
