2.0.3 • Published 3 years ago
react-undraw v2.0.3
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
2.0.3
3 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
2.0.0-beta.1
4 years ago
2.0.0-beta.0
4 years ago
1.14.0
5 years ago
1.13.0
5 years ago
1.12.0
5 years ago
1.11.0
5 years ago
1.10.0
5 years ago
1.9.0
5 years ago
1.8.0
5 years ago
1.7.0
5 years ago
1.6.0
5 years ago
1.5.0
5 years ago
1.4.0
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.0
5 years ago
1.0.0
6 years ago
0.1.0
6 years ago