Intro section with dropdown navigation - TailwindCSS + Fluid Layout
Design comparison
Solution retrospective
How do I link an external SVG file if I want to change its color through CSS? I've tried using <img>, <use xlink:href="..."></use> and <use href="..."></use> tags. The first option doesn't allow me to change its color dynamically, and the other two didn't render the SVG at all. I ended up bypassing this issue by copy-pasting the SVG source code from the external file all throughout my HTML document, which I wanted to avoid since it becomes difficult and more tedious to make changes to all copies.
Community feedback
- Account deleted
You can change the color by first adding the SVG file content directly into your HTML or JSX file, that is add the SVG element, then find the fill attribute in the SVG tag or the path tag inside of the SVG example (<svg><path fill='color' /></svg>) then remove the fill attribute when you find it and apply it from the CSS with the fill property. It this is done you can dynamically change the color from your CSS with javascript or useState hook in react.
Another way you can achieve this is by creating an SVG component that returns the SVG tag then update the fill property with the useState hook, importing the SVG component and applying it, then passing the state down to the SVG component and updating it with the appropriate color respective of the action been carried out.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord