How to Create a Component Library From SVG Illustrations

Avatar of Graeme Fulton
Graeme Fulton on

I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components.

Here’s a GIF that shows what I mean:

An animated GIF of an illustration of a  man sitting behind a laptop computer with the colors of the illustration changing.

What’s unDraw?

unDraw is a collection of MIT licensed illustrations for every project you can imagine and create. It’s a constantly updated collection of beautiful SVG images that you can use completely free and without attribution.

While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Here it is on the newly launched design mentoring site called MentorOla, alongside a language site I’ve been working on myself called Little Lingua:

A side-by-side image showing two websites using unDraw SVG illustrations.
Left: MentorOla by Marc Andrew, Right: Little Lingua]

While using React to build the Little Lingua website, I discovered that converting SVGs into React components made them much more manageable and even more customizable as illustrations.

Because of this usefulness, I wanted to release a library of unDraw React components as an open source npm package to bring the beauty of unDraw to the largest of JavaScript audiences in a simple way:

Framework Nov. 2016 Oct. 2017 % Change
React 2,564,601 7,040,410 174.5%
Angular 1,289,953 2,168,899 68.1%
Backbone 663,610 837,372 31.6%
Angular.js 616,135 1,081,796 75.6%
Vue 6,231 874,424 13,933.%

Source: JavaScript Frameworks by the Numbers

John Hannah, who authored the the JavaScript Frameworks by the Numbers report:

React absolutely dominates. It’s by far the most downloaded according to these numbers…

A lot of inspiration to put this package together came from Miuki Miu’s project React Kawaii, where she did largely the same thing, and a bit more:

Screenshots from the React Kawaii website, including illustrations that inspired the unDraw project.

Her article outlines the overall concept of SVGs as React Components, and here I will go into more of the details involved in my own process including putting together Styleguideist documentation. Here’s everything that will be covered:

  1. How to convert SVG illustrations into customisable React Components
  2. How to use Styleguideist to produce simple, interactive documentation
  3. How to release an npm package (since it was my first time doing this)

1. SVG Illustrations as React Components

When you visit unDraw, it’s currently possible to customize one primary color of each SVG illustration right from the website:

The SVG download you get when you grab the image is pretty tedious to customize any further, as there’s many color values to change. If that SVG is converted to a React component though, it becomes really easy! Compare the two:

unDraw designer SVG vs. React Component

Essentially, the SVG is held within a React component, which is very simple to interface with. You just pass properties to the Component (e.g. skinColor/hairColor/primaryColor), which then sprinkles them into the SVG.

You can do this in just three steps:

Convert the SVG to JSX

There are some awesome tools out there to convert SVGs into the JSX code that’s used in a React component’s render() method. The first one I used was the first one I came across: SVG to JSX—it was also the first Google search result 😉. As it says on the tin, any JSX code is generated from any SVG you paste in:

SVG to JSX converter by Balaj Marius

Once you’ve got your JSX, paste it into your React component like so:

import React from 'react';
import PropTypes from 'prop-types';
const UndrawDesigner = props => (
<svg id='780c6f38–12e9–4526–8343–95ef18389740' dataName='Layer 1' xmlns='http://www.w3.org/2000/svg'>
  // all your svg code
</svg>
);
export default UndrawDesigner;

That’s it! Now you can use this as a component by dropping this into your code:

<UndrawDesigner/>

Right now, you’ll be stuck with the default colors of your SVG. Let’s make those colors easy to change:

Make it Customizable With Props

We can use the benefits of React to make the illustration customisable by adding *props* as placeholders that are used to fill the *color attributes* of the SVG/JSX in your component:

<svg xmlns='http://www.w3.org/2000/svg'>

  <path fill={props.hairColor} d='...' />
  <path fill={props.hairColor} d='...' />
  
  <ellipse fill={props.skinColor} cx='...' cy='...' rx='...' ry='...' />
  <ellipse fill={props.skinColor} cx='...' cy='...' rx='...' ry='...' />
  
  <!-- etc -->

</svg>

To make sure you’re replacing the right fill attributes, you can open the SVG in your browser, and identify colors using your browser’s inspector tools:

You can see the color here is rgb(226,189,149) . Convert that to a hex code. There’s many ways to do this, one is searching “colorpicker” in Google :

Since a single color is often used in numerous places in an SVG illustration (e.g. left hand, right hand, face will be the same), there will be many places a color needs replacing. To do it quickly, grab the HEX code, and do a find-and-replace in your component, replacing the color attribute with your prop name, e.g. {props.skinColor} .

Do this with as many colors/elements of your SVG as you’d like to make customizable, ensuring your props are named so that they’re easy for other people to understand and use.

Add PropType definitions and Default Colors

Once you’ve finished adding your props, it’s good practice to define them as propTypes. This will also help when we make awesome documentation for our components. Add them like so (make sure you’ve got prop-types installed in your project):

UndrawDesigner.propTypes = {
/**
* Hex color
*/
skinColor: PropTypes.string,
/**
* Hex color
*/
hairColor: PropTypes.string,
/**
* Hex color
*/
primaryColor: PropTypes.string,
};

Finish up your component by defining some default colors, right before the export statement. This ensures a fallback color will be used if no props are passed to the component:

UndrawDesigner.defaultProps = {
  skinColor: '#e2bd95',
  primaryColor:'#6c68fb',
  hairColor:'#222'
};
export default UndrawDesigner;

After doing this, your component will be ready to accept values for each of the attributes defined. For example, in UndrawDesigner, we can make a little gray human by passing in various types of gray for skin and hair. Nice and simple:

It’s that much simpler, really. If you want to go beyond changing colors, read Miuki Miu’s article, where she cleverly adds smaller common components that are used as facial expressions across larger components:

2. Making the Style Guide

To make the React illustrations more useful to everyone, it’s possible to create a living style guide of the components using React Styleguidist. It’s not much extra work, either.

Because of how Stylguidist works with React, it’s really straightforward to create documentation from the components we have. Styleguidist requires two main things to generate documentation from our components:

  1. Clear PropType definitions
  2. Component examples

We’ve already taken care of the first one in the previous section. The comments above each PropType definition is also important, as it gets displayed in the end documentation:

Adding component examples is also straightforward—add a Readme.md to the folder of your component with an example of how it would be used. The contents may look something like this:

// UndrawResponsive example
```js
<UndrawResponsive
height='250px'
primaryColor='#6c68fb'
accentColor='#43d1a0'
/>
```

You can find out more in the Styleguidist documentation.

Once you’ve got those two in place, installing and running Styleguidist will create the documentation like magic. Follow the instructions here to install and run it.

3. Releasing the npm package

At this stage, I had a folder of React components with unDraw illustrations, but it’s useless to any other project. Here are the steps I took to turn them into an npm module:

  1. Create a brand new React project using Facebook’s create-react-app
  2. Copy over the react components you’d like to release an npm module into src/node_modules/components of your creat-react-app project
  3. Follow these steps outlined by Pavel Lokhmakov

Finally, to publish your module, create an npm account and follow these two short videos of the npm documentation:

  1. How to create Node.js modules
  2. How to publish and update a package

That’s it! There are over 100 unDraw illustrations by Katerina Limpitsouni on unDraw. At the moment, I’ve only added a handful of those to the unDraw npm package, but will be adding more each week.

Check out the GitHub repository here. I’ll also be releasing the code for the LittleLingua soon, the website that makes use of this unDraw npm package. It’s built with unDraw’s production-ready MIT licensed theme, called evie, which I’ve also converted into React components.

To learn more about transforming SVG illustrations into components, check out Elizabet Oliveira’s talk about her side project, React Kawaii which was also nominated as “Fun Side Project of the Year” at the React Amsterdam Open Source Awards: