统一SVG图标颜色首选CSS filter（适合单色快速上色）和mask（支持多色/渐变/精准控制），两者均无需修改HTML；filter适用于纯黑/白图标，mask需配合background-color与SVG掩码，兼顾hover与描边场景。
小图标颜色不统一，最直接的办法不是一个个改 SVG fill 或 class，而是用 CSS 统一控制——filter 适合快速上色（尤其单色图标），mask 更适合保留形状、自由换色（支持多色、渐变甚至图片底纹）。两者都不用动 HTML 结构，适配性高，特别适合初级项目里批量处理 iconfont、SVG 雪碧图或内联 SVG。
用 filter: hue-rotate() + brightness() 快速统一样式
适用于纯黑/纯白的 SVG 图标（推荐先转成 monochrome）。原理是把图标当“灰度图”处理，再用滤镜上色：
- 先确保图标本身是 #000 或 #fff（可用
fill="currentColor"+color控制） - 加一层
filter: brightness(0) saturate(1) invert(1) sepia(1) hue-rotate(180deg)可以把黑变蓝；更稳妥的是用filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(120deg)灵活调色 - 封装成 class 更方便：
.icon-blue { filter: brightness(0) saturate(1.5) hue-rotate(200deg); }
用 mask + background-color 实现精准换色
适合需要稳定色值、支持 hover 变色、或图标带描边/多区域的场景。核心是：用 SVG 的 <mask></mask> 定义透明区域，再用 background-color 填充可见部分：
- 把 SVG 转成内联，并设置
mask-image: url(#myMask)（或用 CSS 写 mask-border） - 更简单做法：用
-webkit-mask配合 base64 编码的 SVG mask（只保留形状路径），例如：mask-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><mask id="m"><rect width="100%" height="100%" fill="white"></rect><path d="M..." fill="black"></path></mask></svg>#m"); - 然后直接设
background-color: #4285f4，颜色就只出现在图标轮廓内
兼容性和落地建议
初级项目不用追求全浏览器完美，重点是可维护、易替换：
立即学习“前端免费学习笔记（深入）”；
- 优先用 filter：Chrome/Firefox/Safari（iOS 15.4+）都支持，写法简单，适合按钮、导航图标等基础场景
-
mask 方案注意 fallback：旧版 Safari 对
mask-image支持弱，可搭配@supports (mask-image: none)加降级样式（比如直接用 PNG + class 控制 color） - 所有图标尽量统一来源：导出为单色 SVG（无 fill/stroke），或用 iconfont 工具生成一致的字体图标，减少后期 hack 成本
基本上就这些。不复杂但容易忽略的是：先规范图标源文件，再选 CSS 方案——比到处 patch 更省时间。
