1 一般SVG图标颜色修改

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.585 12.087c0 6.616 3.974 11.98 8.877 11.98 4.902 0 8.877-5.364 8.877-11.98 0-6.616-3.975-11.98-8.877-11.98-4.903 0-8.877 5.364-8.877 11.98zM125.86.107H35.613c-1.268 0-2.114 1.426-2.114 2.852v18.255c0 1.712 1.057 2.853 2.114 2.853h90.247c1.268 0 2.114-1.426 2.114-2.853V2.96c0-1.711-1.057-2.852-2.114-2.852zM.106 62.86c0 6.615 3.974 11.979 8.876 11.979 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zM124.17 50.88H33.921c-1.268 0-2.114 1.425-2.114 2.851v18.256c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852V53.73c0-1.426-.846-2.852-2.114-2.852zM.106 115.913c0 6.616 3.974 11.98 8.876 11.98 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zm124.064-11.98H33.921c-1.268 0-2.114 1.426-2.114 2.853v18.255c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852v-18.255c0-1.427-.846-2.853-2.114-2.853z"/></svg>

一般svg 中用 <path></path> 实现的，可以直接通过 color 属性修改颜色：

svg {
  color: red;
}

通过设置 color 属性将 svg 图标改为 红色。

2 image类的SVG图标颜色修改

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="14" viewBox="0 0 13 14">
  <image id="图层_1" data-name="图层 1" width="13" height="14" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAABVElEQVQokX3QMUvDQBQH8JeaWEIrFNqhk4uTIKTo5uLi0kWnOtSlQwZxCySIn8HiqpR2cXIQHB3bj9DFUUgXJxEXCSH3/k9OknLE4IMjd5f73eP+VFVBEBwHQXBa+ZOILHMRhmGDmcdEdMHMBOA5SRJ/Npt9VqIoinoAngDs5KAY70qp8+l0uijObuQdrkTkEUCnBIiZt0Rk5Hme22q1FnEcwwrDcAHgSETIAF8AFDN3clhcsGTmE7sC6DHOsuyDiO5L+z0iGtkGSAEsAby6rnvb7XbT1WrlAdgHsMfMjbybss2blFLXk8lkbgR1ORwOD4hobr6zZizqIvLi+/5uIQaDwbYGOgwT2UZKvzDLMqff79ebzWZNwzJYdzLSSUTksN1uvzmOE1uWdQbg2wS61m/Kv66I3BV7InJjAh3an07leRUQEUdHHjLz5n9IVz5XaZo+/ADZxawMaECznAAAAABJRU5ErkJggg=="/>
</svg>

有些svg 中用 <image></image> 实现的，不支持通过 color 属性修改颜色，可以试试这个方法：

svg {
  overflow: hidden; // 超出部分隐藏
  filter: drop-shadow(#FFF 100px 0);  // 在右侧 100px 加一个 #FFF 的阴影
  transform: translateX(-100px); // 整体向左偏移 100px 原本的元素超出边界不显示。实现效果：本来的位置被白色阴影替换。
}

1. 设置 overflow: hidden; 使得超出部分隐藏；
2. 在原位置右侧设置设置一个阴影 filter: drop-shadow(#FFF 100px 0);；
3. 将整体向左偏移 transform: translateX(-100px);，原本的图标由于超出了边界隐藏，阴影代替原图标（具体的偏移量可以根据实际情况确定）。

如果在设置 svg 图标发现无法通过 color 修改时，可以试试这个方法。

笔记主要为自用，欢迎友好交流！