For the fill of an svg to pick up the current colour in a solution using Tailwind css does the svg have to be inline?
I’m assuming from my own experimentation that the answer to this is yes but I’d like to know if there is another way to achieve the same without having to have the svg code inline.
There isn’t a great way to colorize an SVG that’s been referenced as an image (non-inline.) If you really need to do it, you can create a CSS filter to add the color, but it isn’t pretty. Here is a codepen that will generate the filter for you.
CSS filter generator to convert from black to target hex color (codepen.io)
See css - How to change the color of an svg element? - Stack Overflow
@adamslowe Thanks. for the confirmation of what I suspected was the case, that this only really works well with inline svgs. I’d hoped there was an easy workaround as I’d picked an svg with a stupidly long path.
As I’m looking for a pair or svgs to use on a drop down menu with a number of items I’ll try and locate a couple of less dense svgs that don’t have such long paths.
