如评论中所述，遮罩不是更改图标颜色的首选方法。过滤器可以做得更好。这就是我要做的。如果我为了显示结果而放弃了Vue语法，请原谅，但是我确信你可以轻松地将其移植回去。
过滤器首先用所需的颜色填充过滤器区域，然后使用Porter-Duffatop运算符将其父区域裁剪回图标的轮廓。
.flex-container {
justify-content: space-around;
display: flex;
padding: 20px;
}
.iconTile {
margin: 0;
padding: 10px;
width: 100px;
height: 100px;
}<div class="flex-container">
<div class="iconTile">
<svg viewBox="0 0 36 36">
<filter
id="checkmark-filter" >
<feFlood
flood-color="purple"
result="color"
/>
<feComposite
operator="atop"
in2="SourceGraphic"
in="color"
/>
</filter>
<image
href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Icons8_flat_checkmark.svg/768px-Icons8_flat_checkmark.svg.png"
x="0"
y="0"
width="100%"
height="100%"
filter="url(#checkmark-filter)"
/>
</svg>
</div>
<div class="iconTile">
<svg viewBox="0 0 36 36">
<filter
id="pencil-filter" >
<feFlood
flood-color="green"
result="color"
/>
<feComposite
operator="atop"
in2="SourceGraphic"
in="color"
/>
</filter>
<image
href="https://upload.wikimedia.org/wikipedia/commons/5/57/Red_pencil.svg"
x="0"
y="0"
width="100%"
height="100%"
filter="url(#pencil-filter)"
/>
</svg>
</div>
</div>
就像魅力一样，非常感谢！codepen.io/Kesselfest/pen/xxEVvNj