Interactive Rating Component / React - CSS - Vite

Community feedback

• 

  P

  Ryan Bradley•630

  @ryanbradley-webdevPosted over 1 year ago

  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-toledoPosted over 1 year ago

  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

  Ryan Bradley•630

  @ryanbradley-webdevPosted over 1 year ago

  @felix-toledo happy to help!

  0