Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro section with dropdown navigation - TailwindCSS + Fluid Layout

Stephen Yu 150

@StephenYu2018

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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 helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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