React component for unDraw illustrations.
React component for unDraw illustrations.
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:
primaryColor
prop instead.undraw_barbecue_3x93.svg
=> barbecue.svg
).name
prop will need to match your file name.undraw
folder at the root of your project.react-undraw-cli
to your build
and/or start
script:
"prebuild": "react-undraw-cli"
"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