CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色作为背景色，然后原始图标作为遮罩图片，效果就出来了。

话不多说，直接上代码~~~

<style>

.icon {
    display: block;
    width: 60px;
    height: 60px;
    -webkit-mask: url(https://static.tojoyshop.com/images/wxapp-boss/icon-favorite-1.svg) no-repeat;
    /* 一定要带 -webkit- 属性哦~ */
}

.icon1 {
    background: linear-gradient(#f00, #0f0, #00f);
}

.icon2 {
    background: #f00;
}

</style>


<div class="icon"></div>
<div class="icon icon1"></div>
<div class="icon icon2"></div>

icon

icon1

icon2