Смена цвета для svg изображений, когда они вставлены через background-image: url.
Открываем в текстовом редакторе иконку svg, копируем оттуда текст и вставляем в редактор на этом сайте: yoksel.github.io/url-encoder/
В Ready for CSS получаем код готовый для вставки в css стили:
Меняем атрибут background-image: url на mask-image: url и webkit-mask-image: url и задаем также цвет. Стилистика приведена для SCSS:
.icon-add {
background-color: black;
mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg class='svg-img' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'.........");
-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg class='svg-img' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'.........");
&:hover {
background-color: red;
}
}
background-color: black;
mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg class='svg-img' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'.........");
-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg class='svg-img' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'.........");
&:hover {
background-color: red;
}
}
Можно без webkit-mask-image, если компилятор умеет самостоятельно добавлять этот атрибут.
Если надо отцентровать, то добавить:
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-size: contain;
mask-position: center;
