SVG图标颜色需用fill而非color，且仅内联SVG可用CSS控制；设fill: currentColor可继承父级color，实现主题切换等动态效果，但需删除SVG源码中的固定fill属性。
SVG 图标用 fill，不是 color
纯 CSS 控制 SVG 图标颜色时，color 属性默认不生效——因为 SVG 元素（如 <path>、<circle>）的填充由 fill 决定，和文本颜色无关。只有当 SVG 被内联到 HTML 中（即写在 HTML 里，不是 <img src="icon.svg">），才能用 CSS 设置 fill。
常见错误现象：color: red 对内联 SVG 没反应，图标还是黑色或原始色。
- 确保 SVG 是内联写法（不是外部引用），例如直接把
<svg>...</svg>粘贴进 HTML - 给 SVG 根元素加
class，然后用fill: currentColor让它继承父级color - 避免在 SVG 源码里写死
fill="xxx"，否则会覆盖 CSS
currentColor 是统一配色的关键
currentColor 是一个动态值，等于当前元素的 color 计算值。把它设给 fill 或 stroke，就能让图标自动响应文字颜色变化，比如 hover、主题切换、禁用态等。
<span class="icon-text">
<svg viewBox="0 0 24 24" width="16" height="16">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.1 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
点赞
</span>
CSS：
立即学习“前端免费学习笔记（深入）”；
.icon-text {
color: #007bff;
}
.icon-text svg {
fill: currentColor;
}
- 修改
.icon-text的color，图标立刻同步变色 - 如果 SVG 有多个
<path>，全部会被fill: currentColor影响 - 注意：IE 不支持
currentColor在fill中的使用（IE11 部分支持，但有 bug），需测试
字体图标（如 Font Awesome）走 color，但原理不同
字体图标本质是字符（Unicode 符号），所以直接响应 color、font-size、line-height。不需要 fill，也不依赖 SVG 结构。
- 用
<i class="fa fa-star"></i>这类标签时，color: orange直接生效 - 但要注意：某些图标字体（如早期版本的 Material Icons）用伪元素 + 字体渲染，若被重置了
font-family或content，图标会消失 - 混合使用 SVG 和字体图标时，别指望同一个 CSS 规则同时控制两者颜色——它们走的是两套机制
外部 SVG（<img>）无法用 CSS 改色
用 <img src="icon.svg"> 加载的 SVG 是独立文档上下文，CSS 无法穿透作用域去修改其内部 fill。
- 强行改色只能靠滤镜（如
filter: invert(1) hue-rotate(180deg)），但不可控、易失真 - 更稳妥的做法是：服务端生成多色版本，或前端用
URL.createObjectURL(new Blob([...]))动态注入内联 SVG - 现代方案可考虑
<use>引用<symbol>（需预置 SVG Sprite），再配合fill: currentColor
最常被忽略的一点：SVG 文件本身带 fill 属性（比如导出工具默认加了 fill="#000"）会强制覆盖 CSS，必须手动删掉或改成 fill="none" 或 fill="currentColor" 才能真正受控。
