Skip to content
Submitted almost 3 years ago

Order summary - Bg wave animation + Subtle purchase animation

react, tailwind-css
Alex McGonagle•260
@thevolcanomanishere
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What did I find most difficult? Getting SVGs to work when deployed using Vite + Vercel is always a bit off. They work locally and then don't when you upload them. Figured it out by inlining the SVGs. This required updating the XML of the SVGs to be compliant with how React works. Sizing the SVGs can be confusing due to viewbox/styling but I figured it out in the end.

I decided to switch out the static background and added a similar animated SVG wave to the background 🌊

Code

Please log in to post a comment

Log in

Community feedback

  • Karol Binkowski•1,620
    @GrzywN

    Hey!

    You can import images in your code like anything else in Vite. The imported thing returns an url for your imported image. You put it like this <img src={importedImage} alt="" /> (example in React.js) and Vite knows that it needs to import it in the build process. I had the same problem too, but I some how figured it out. If it's in your CSS / Tailwind CSS config, you can just use absolute paths like url(/assets/images/image.jpg), vite will import it as well.

    Have a nice day and keep coding!

    Marked as helpful

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