React component for unDraw illustrations.
- 🚀 Works with any illustration from unDraw.
- 🎨 Customize colors with props.
- 🎉 Written in TypeScript.
- 🎁 Smaller bundles by only including what you need.
npm install react-undraw --save
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 |
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
...
npm install
npm run build