alynva/react-undraw

React component for unDraw illustrations.

React unDraw

React component for unDraw illustrations.

Table of Contents

• Features
• Installation
• Usage
• Illustrations
• Development

Features

• 🚀 Works with any illustration from unDraw.
• 🎨 Customize colors with props.
• 🎉 Written in TypeScript.
• 🎁 Smaller bundles by only including what you need.

Installation

npm install react-undraw --save

Usage

import Undraw from 'react-undraw';

// optionally override default props
Undraw.defaultProps.primaryColor = 'darkblue';

<Undraw name="coding" />;

Props:

Prop	Type	Description	Default
name	string	Illustration file name (without extension).	n/a
primaryColor	string	Illustration primary color.	#6c63ff
height	string	Illustration height.	250px

Illustrations

Bring your own illustrations! To comply with the updated unDraw license, we can't bundle the illustrations with this package 😞 However, this means you can always use the latest illustrations! 😎

Here's what you need to do:

• Download any illustrations you want from unDraw.
  • No need to change the color before download, use primaryColor prop instead.
  • Optional: rename file to remove prefix/suffix (undraw_barbecue_3x93.svg => barbecue.svg).
  • The name prop will need to match your file name.
• Put SVG files in an undraw folder at the root of your project.
• Add react-undraw-cli to your build and/or start script:
  • "prebuild": "react-undraw-cli"
  • or ... "build": "react-undraw-cli && react-scripts build"

Example project structure:

package.json
src/
 ...
undraw/
  coding.svg
  hologram.svg
  ice_cream.svg
  ...

Development

npm install
npm run build