I’m trying to figure out, how to override the current colour of an SVG that is actually inside an image. It seems actually only works with filters CSS, but I need it to work with HEX code. Is there any chance to recolor the SVG file uploaded via Metafield? Any help will be much appreciated.
The code:
{{- block.settings.custom_icon | image_url: width: block.settings.custom_icon.width | image_tag: loading: 'lazy', style: style, sizes: sizes, widths: widths, class: 'test-2' -}}
.test-2 {
filter: invert(50%) sepia(92%) saturate(2575%) hue-rotate(161deg) brightness(94%) contrast(101%);
}
what I want to make:
.test-2 {
color: rgb(var(--text-color)) !important;
}
/*================ OR ================*/
.test-2 {
color: #FFFF !important;
}
/*Note, nothing of above works*/
The input and output
(The idea is to recolor the custom icon by metafield…
Thank you so much