cristinafsanz
7/25/2019 - 2:55 PM

SVG mask change color

// https://codepen.io/chriscoyier/pen/bJXRwq?editors=0110
// https://twitter.com/chriscoyier/status/1124064712067624960
// https://mayashavin.com/articles/svg-icons-currentcolor: With mask you can also have a button with text and icon, and you can set `background: currentColor;` in the icon to inherit the color

.icon-bike {
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}
.icon {
  display: inline-block;
  width: 70px;
  height: 70px;
  background: black;
  mask-size: cover;
}
.icon:hover,
.icon:focus {
  background: red;
}