Tailwindcss: Linked SVG Colors

[scottzirkel]

Following the examples, it's easy enough to use the text color to change an inline SVG, but what about linked ones? Some I have are too long to effectively use inline. I've tried putting the text color on the img tag as well as the svg tag in the file itself, but neither work. Any ideas?

[adamwathan]

Hey @scottzirkel! Unfortunately it's not possible to style SVGs that are linked through img tags; only inline SVG can be properly styled with CSS.

Here's a good article on it:

https://css-tricks.com/using-svg/

Your best bet for styling non-inline SVG is to embed the styling information into the SVG itself unfortunately.

[scottzirkel]

Bummer, but kinda what I figured. Thought maybe you were smart enough to figure a way around that. Guess not.

[reinink]

Alas, @adamwathan is only a mere human. 😂

[MichaelDeBoey]

@scottzirkel A more readable way would be to use a blade partial, Vue component, ... and pass the classes into the partial. 🙂
But that would not help with plain html ofcourse. 😕

[scottzirkel]

I was so focused on getting the design done, I didn't even think about breaking the blade apart yet. Thanks @MichaelDeBoey!

[MichaelDeBoey]

You're welcome @scottzirkel 🙂
Got the trick from @adamwathan in one of his 'Building @kitetail' streams 🙂