## React unDraw Components

#### MIT licensed illustrations by unDraw for your React projects
![unDraw screenshot](readme.png)

* SVGs from [unDraw](https://undraw.co/) as customisable images in React.  
* It's an early version, only containing 10 illustrations, adding more as I get time - contributors welcome! *update - now 21!
* available to try on [npm](https://www.npmjs.com/package/react-undraw-illustrations)
* play with it in [styleguidist](https://graemefulton.github.io)

## Project Usage
Install in your project: `npm install react-undraw-illustrations --save`

At the top of your React component, import the illustrations you want to use:

`import {UndrawTabs, UndrawDesigner,UndrawResponsive } from 'react-undraw-illustrations';`

Then use them, passing settings you like, e.g:

`<UndrawDesigner skinColor="brown" hairColor="#222"/>`

<hr>

#### Check out how the components work:

![styleguidist animation](readme.gif)

#### Find out more about how this was made:

Read about it on CSS-Tricks 👉 [How to Create a Component Library From SVG Illustrations](https://css-tricks.com/how-to-create-a-component-library-from-svg-illustrations/)
![css tricks article image](https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_1000,f_auto,q_auto/v1522886582/react-svg-component-library-5_skzbmh.jpg)