SVG图标颜色应使用currentColor实现自动继承父元素color值，需内联SVG并设置fill="currentColor"，配合CSS类、自定义属性及prefers-color-scheme可统一控制、适配主题与深色模式。
SVG图标颜色不好改，核心原因是没利用好 currentColor 这个 CSS 关键字。它能自动继承父元素的 color 值，让 SVG 图标像文字一样随主题色、链接状态、按钮样式实时变色，无需重复写 CSS 或 JS 操作 fill/stroke。
确保 SVG 内联且使用 currentColor
外部引用的 SVG（如 
fill="currentColor" 或 stroke="currentColor"：
配合 CSS 类更灵活：，再在 :hover/:focus 中改 color，图标颜色同步响应。
兼容深色模式与动态主题
结合 CSS 自定义属性和 prefers-color-scheme，一行代码适配亮/暗色模式：
立即学习“前端免费学习笔记（深入）”；
:root { --text-color: #333; }
@media (prefers-color-scheme: dark) {
:root { --text-color: #fff; }
}
.theme-icon { color: var(--text-color); }
只要 SVG 使用 ，就自动跟随系统或自定义主题切换，不用额外 JS 切换 class。
避免常见坑：fill 被覆盖或未生效
- 检查 SVG 是否含内联
属性——它会覆盖color，删掉或改成 - 确认没有 CSS 规则强制设置了
，优先级太高会拦截继承 - 若用 Symbol +
.icon-link { color: var(--primary); }，需在fill="currentColor"外层容器设 color，且fill="#000"内部路径仍要用currentColor
不复杂但容易忽略。用对 currentColor，SVG 图标就能真正“活”起来。
