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

Interactive Rating Component / React - CSS - Vite

Felix 70

@felix-toledo

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is good for me!

Community feedback

P

@ryanbradley-webdev

Posted

Great work on this project!

I viewed this on two separate browsers, and the SVG appeared on both with no errors. I also went through your code and didn't see anything that would cause this error after deploying. I'm assuming the issue arose as a result of the way Vercel deploys applications, possibly the way they build and deploy the app and then update build cache afterwards. Hopefully it's just the result of a bit of lag time with uploading images.

A way you can avoid this with SVGs in Vite is to make dedicated React components whose sole purpose is to return the SVG:

export default function MySvg() {
    return (
        <svg>
            <path ... />
        </svg>
    )
}

I prefer to do this or just place the SVG directly into the component vice using an 'img' element to avoid import issues like this, and also to allow custom styling if I need it. It also makes reusing SVGs in application super easy!

Either way, great job! I hope this helps, and happy coding!

Marked as helpful

1

Felix 70

@felix-toledo

Posted

Wow! Thank you for your recommendation! I've just corrected the mistake, but I will try to create one of the two images with that recommendation, as you suggested.

1
P

@ryanbradley-webdev

Posted

@felix-toledo happy to help!

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