如何修改由 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 事件仍然能正常触发。