Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time

Creative Coding: Making Reusable SVGs with React


Learn how to merge your creative side with your coding side in this live-coding talk! Leveraging the practice of reusable code and React components, we’ll create SVG images and animations that can be extended, adapted, and reused throughout your app. See how a few tweaks and props injected into your standard SVG code can give you the power of composable and reusable components!

Level: Intermediate

Length: 30 mins



  • Explain what SVGs are and why they're useful
  • Create a base SVG used for the rest of the talk
  • Create a React component based on this SVG
  • Refactor the component to be generic and reusable and demonstrate using this component to programmatically create various different SVGs

This talk will be all live coding! I’ll start with a quick intro to SVGs and why they’re useful and then dive straight into code. I’ll start by showing the code for a simple SVG illustration and pulling it into an existing React app. Then, I’ll show how to split apart pieces of the SVG, along with showing what to look for in the SVG and how to read the code for SVGs. Next, I’ll refactor hardcoded pieces of the SVG to use props passed into the illustration and show a grand finale of reusing the same SVG component to render different versions of the same base illustration.

This talk will be fun, but also practical - showing glimpses of how refactoring components works and how to make components more generic and reusable.

Delivered at