使用遮罩

.icon {
    color: deepskyblue;
    background-color: currentColor;
    mask: url(./icon.svg) no-repeat center / 100%;
}

背景混合模式 background-blend-mode

/* 变色的时候改变 --fill-color 的属性值 */
.element {
    --fill-color: gray;
    background: linear-gradient(var(--fill-color), var(--fill-color)), url(./icon.svg), #fff;
    /* 或者 lighten, normal; */
    background-blend-mode: screen, normal;
}

测试下来，如果 icon.svg 图标有很多半透明的边缘像素点，screen混合模式效果更好，如果底色不是白色，而是很淡的灰色，则screen 混合效果会有些许误差，lighten 效果没有误差。

一些限制

1. icon.svg 需要是纯黑色，这个很好满足，大多数小图标网站下载的纯色图标默认都是黑色；
2. 元素背景不需要是透明；

此方法实现的前提是元素需要设置一个浅色的底色，不然混合模式的执行就会有问题，因此，适合有背景色也无关紧要的场景，例如像是搜索框这种，就非常合适。