2020-05-14
Convert a colored icon to black or white
No matter if you have a inline SVG file or a background external SVG file.
With filters
like grayscale
and brightness
you can have your colored icon black or white.
HTML
<div class="icon1"></div>
CSS
div:after {
content: '';
display: block;
height: 24px;
width: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z' fill='rgba(45,191,255,1)'/%3E%3C/svg%3E");
}
.icon1:after {
filter: grayscale(1) brightness(200%);
}
Sources
You saw it first on CSSPoo.
Comments