Recoloring SVG assets with a mask

It’s common, in large projects, to want to use the same symbol but in a different color in a different context. An SVG inserted into the page is the best option here. It affords the ability for any part or whole of the SVG to be recolored. However, that may not be practical or preferable for any number of reasons. You should know that if your SVGs are a single color, you can recolor them using a mask. Consider our star SVG inserted into the page as a background image:

<div class="mask-bg"></div>

However, instead of using background-image to show the star image, we can use mask-image. The markup stays as before but the CSS looks like this:

.mask-bg {
  /* background-image: url("Star.svg"); */
  /* background-repeat: no-repeat; */
  mask-image: url("Star.svg");
  mask-repeat: no-repeat;
  background-color: green;
  height: 200px;
  width: 200px;
  transition: background-color 1s;
  &...