README
Iblis React Undraw
React component library for undraw.co (1263 illustrations)
You can find all undraw illustrations here: Undraw.co
Demos
Why
Undraw is wonderful and you can use the illustrations published on unDraw for personal and commercial projects, without the need to include attribution. I always think my projects looks more professional and funnier with illustrations. As we say a picture is worth a thousand words.
There are lot of others undraw react components
But no React component libraries has the following requirements :
- Written in pure Typescript
- Have up-to-date illustrations
- Compile with esNext (I don't want have all the svg in my final bundle when I use only one illustration)
- Can customize the main colors
Documentation and Basic Usage
All props can be found here
Basic Usage
import React, { FunctionComponent } from 'react';
import { Svg3DModeling } from 'iblis-react-undraw';
export const BasicUsage: FunctionComponent = () => {
return <Svg3DModeling />;
};
You can extend all the properties of React.SVGProps
By default you can change the height of the components and the width will be set to '100%'
Install
Install the library and the dependencies to your React project
npm install iblis-react-undraw
Dev
To launch dev environement with storybook npm run start
Then you will be able to see your components and test it on http://localhost:9010
All the documention and test are done in the stories
folder
Test
You can launch test by running npm run test
To rebuild the project and update with the new undraw design
First download all new svg
cd scripts/scrap_website/
npm install
node index.js
Then generate the typescript components
cd ../generate_components/
npx @svgr/cli --config-file .svgrrc.js --ext tsx --out-dir ../../src/components ../scrap_website/undraw
Then add the new components in src/index.ts
and in stories/demo.stories.mdx
Build the library
npm run tsc
or
export NODE_OPTIONS=--max_old_space_size=4096
npm run build
Contribute
- Fork this repository to your own GitHub account and then clone it to your local device
- Make the necessary changes and ensure that the tests are passing
- Send a pull request
Todo
- Write more tests with jest
Known issues
- None for the moment
Thanks
- Undraw.co for the fantastic work and the keep going illustrations. It's just amazing!
License
Please, refer to LICENSE file