We were trying to change the color of an svg. But our initial images were not of the same color. After a while we figured out the best way would be to force them to an initial color and then do filtering.
Here is how our plain svgs looked
Here is our code
<img
src={item.icon}
style=
{{
height: "100%",
width: "auto",
borderRadius: "10px",
display: "block",
filter: "brightness(0) saturate(100%) invert(31%) sepia(82%) saturate(6098%) hue-rotate(256deg) brightness(93%)"
}} />
The brightness(0) and saturate(100%) turn the image to black.
Top comments (0)