如何修改由 img 标签引入的 svg 图片颜色 (react环境）

网上试了好几个方法都不行，问了一下身边同事的处理方法，终于搞定了。话不多说，直接上代码：

此处是 jsx 中的图标引入

<img className={STYLE.contactIcon}onClick={() => {你的一些操作}} style={{WebkitMaskImage: `url(${item.icon})`, maskImage: `url(${item.icon})`}}/>

以下为 CSS 文件代码

.contactIcon {width: 28px;height: 28px;background-color: #666666;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-size: contain;mask-size: contain;margin-left: 26px;}

通过 -webkit-mask-image 和 mask-image 两个属性进行路径的设置即可，再使用 background-color 改变图标的颜色。
这种方法也不会阻塞点击事件，原先的 onClick 事件仍然能正常触发。