CSS 修改 img src 中的 svg 颜色

svg 性能

如果一个 React 页面中有几百个复杂的 svg，React 会需要记录所有的这些节点，当更新他们时页面会明显变慢，因为 React 需要不停的计算和 batch-update 它们，尤其是在 Safari 中，这个情况非常严重。

一个解决方案是使用 <img> 来内嵌我们的 svg，这样所有的 svg 都在一个 img 节点中，Virtual DOM 也只用关注一个节点，更新的性能会好很多。

但是如果我们要修改 svg 的样式呢？比如颜色和大小，不能直接在 svg 元素上进行修改。大小还比较好办，可以用 img 的 width 和 height，但是颜色的话，img 上没有 fill 这个 css property，我们可以使用 filter property。

使用 CSS filter

HTML 代码：

<div className="App">
  <img className="svg-default" src={pdfIcon} alt="pdf icon" />
  <img className="svg-white" src={pdfIcon} alt="pdf icon" />
  <img className="svg-gray" src={pdfIcon} alt="pdf icon" />
  <img className="svg-black" src={pdfIcon} alt="pdf icon" />
  <img className="svg-brown" src={pdfIcon} alt="pdf icon" />
  <img className="svg-blue" src={pdfIcon} alt="pdf icon" />
  <img className="svg-" src={pdfIcon} alt="pdf icon" />
</div>

invert()：最终颜色的亮度，1 就是白色了，0 就是黑色

sepia()：让颜色变暖，更偏黄/棕色

saturate()：饱和度，1 颜色最浓最深，0 就会变成黑白

hue-rotate()：参考：developer.mozilla.org/en-US/docs/…

有了这些工具，基本上就可以配出我们要的颜色了，但是，找到颜色相应的数值挺难的，可以通过不停调整数值尝试得到，也可以用 photoshop 或其他颜色检查工具来帮我们找到！

.svg-default { }
.svg-white { filter: invert(1); }
.svg-gray { filter: invert(0.5); } 
.svg-gray { filter: invert(0); } 
.svg-brown { filter: invert(.5) sepia(1); } 
.svg-blue { filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg); }