Iblis React Undraw

React component library for undraw.co (1263 illustrations)

You can find all undraw illustrations here: Undraw.co

Demos

• All library illustrations

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

• React UnDraw Illustrations
• React UnDraw

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

• Properties

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

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Make the necessary changes and ensure that the tests are passing
3. 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