Export the SVG from Sketch.
2. Open the SVG file your text editor to see the code.
3. Wrap it in a component and clean up some of the junk.
Sketch adds a bunch of useless markup that you can remove. You should end up with something like the code above. Note that I’ve added classNames to the bounding box, and the heart path itself. This will let me target these shapes directly in my CSS later when I want to change the color on hover, for example.
4. Style it with CSS
Your final component should look something like this: (I’m using styled-components for styling)
Notice how we can use those classNames we added to target individual shapes within the SVG. This lets us transition from white to red when the user hovers their mouse over the button.
5. Your SVG component is ready to use!
Here’s a demo of our LikeButton component, with animated SVG transitions in action:
That’s it! If you have questions feel free to leave them in the comments.