react-undraw
v2.0.3
Published
React component for unDraw illustrations.
Downloads
1,668
Maintainers
Readme
React unDraw
React component for unDraw illustrations.
Table of Contents
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.
- No need to change the color before download, use
- Put SVG files in an
undraw
folder at the root of your project. - Add
react-undraw-cli
to yourbuild
and/orstart
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