直接给<img>加filter: hue-rotate()等滤镜可快速变色，但仅改变视觉效果、不生成新像素，彩色PNG可能偏色而非精准单色；现代浏览器支持，IE完全不支持。
用 CSS filter 给 <img> 快速变色，但要注意兼容性
直接给 <img> 加 filter: hue-rotate() 或 filter: brightness() contrast() saturate() 是最轻量的换色方式，不用动原始图片文件。但它只改变视觉效果，不生成新像素——所以图标如果本身是彩色 PNG，hue-rotate(180deg) 可能只是“偏色”，不是你想要的纯单色效果。
- 适合场景：临时高亮、悬停变色、主题切换时统一色调（比如深色模式下把所有图标压暗）
- 慎用场景：需要精确控制某一种颜色（如把任意图变成 #3b82f6 蓝），
filter难以精准映射 - 兼容性：现代浏览器全支持，IE 完全不支持
filter（别在 IE 项目里试） - 示例：
img.icon { filter: hue-rotate(90deg) saturate(1.5); }
SVG 图标才能真正“换色”，fill 和 stroke 是关键
如果你用的是内联 SVG（即把 SVG 代码直接写进 HTML），就能像操作文字一样用 CSS 控制 fill 和 stroke。这是网页图标换色最可控的方式。
- 必须是内联 SVG，不能是
<img src="icon.svg">—— 后者会隔离样式，fill无效 - 原始 SVG 里不能有内联
fill="#000"属性，否则会覆盖 CSS；建议删掉或改成fill="currentColor" -
currentColor是个妙招：它自动继承父元素的color值，一行 CSS 就能联动换色.nav-icon { color: #ef4444; } /* 所有 fill="currentColor" 的 SVG 自动变红 */ - 如果 SVG 用了
<use>引用 symbol，也要确保 symbol 内部没锁死颜色
<picture> + srcset 不解决换色问题，别误用
有人试图用 <picture> 切不同颜色的 PNG/JPG 版本，比如浅色图标配深色背景、深色图标配浅色背景。这确实可行，但属于“多图方案”，不是“换色”——它不节省资源，反而增加请求数和维护成本。
彩色通用功能图标合集矢量素材
下载
彩色通用功能图标合集矢量素材适用于手机APP应用软件UI界面设计、企业官网后台导航栏、商业企划书PPT排版美化、产品功能说明书配图等相关视觉场景设计，由AI生成的Ai格式素材。
- 适用边界很窄：仅当你要适配系统级深色模式（
@media (prefers-color-scheme: dark)），且设计师提供了两套独立图标资产 - 无法动态响应用户点击/状态变化（比如选中态变蓝），因为切换要靠 JS 换
src，体验卡顿 - 注意：
<source media="(prefers-color-scheme: dark)" srcset="icon-dark.svg">中的srcset值必须是有效路径，且服务器要正确返回 SVG MIME 类型（image/svg+xml）
JS 动态改 SVG 颜色？小心 DOM 注入和 XSS
如果图标是通过 JS 插入的 SVG 字符串（比如从 API 拿到 SVG 内容再 innerHTML 注入），想运行时改色，得先确保 SVG 是可操作的 DOM 节点，而不是字符串。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
el.innerHTML = '<svg><path fill="#000" d="..."></svg>'; // fill 被硬编码，JS 拿不到
- 正确做法：插入后用
querySelector('path')找到路径，再改style.fill或setAttribute('fill', '#3b82f6') - 风险点：如果 SVG 内容来自不可信来源，直接
innerHTML会执行其中的<script>标签，必须用DOMPurify.sanitize()过滤 - 更稳的替代：用
new DOMParser().parseFromString(svgStr, 'image/svg+xml')解析，再取documentElementappend 到页面
实际换色最难的不是语法，而是判断图标来源类型——是 <img>、内联 SVG，还是第三方图标库（如 Font Awesome 的 <i class="fa-solid fa-home">）。不同来源，换色路径完全不同。别一上来就写 CSS，先看控制台里那个图标节点长什么样。
