UNPKG

react-open-doodles

Version:

A Free Set of Sketchy Illustrations provided by https://www.opendoodles.com/

64 lines (48 loc) 1.78 kB
<h1 align="center">Welcome to react-open-doodles 👋</h1> <p> <a href="https://badge.fury.io/js/react-open-doodles"> <img src="https://badge.fury.io/js/react-open-doodles.svg" alt="npm version" height="18"> </a> <a href="#" target="_blank"> <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" /> </a> <a href="https://twitter.com/oilunabr" target="_blank"> <img alt="Twitter: oilunabr" src="https://img.shields.io/twitter/follow/oilunabr.svg?style=social" /> </a> </p> > A Free Set of Sketchy Illustrations provided by [opendoodles](https://www.opendoodles.com) <p align="center" > <img src="https://opendoodles.s3-us-west-1.amazonaws.com/coffee.gif" width="500" > </p> Open Doodles was created by [Pablo Stanley](https://twitter.com/pablostanley) we use this Illustrations on our site [oiluna.com](https://oiluna.com). This package is only a utility to use the illustrations in your React project. ## Install ```bash npm install --save react-open-doodles // or yarn add react-open-doodles ``` ## Usage ```tsx import React, { Component } from "react"; import { LovingDoodle } from "react-open-doodles"; export default class App extends Component { render() { return ( <div> <LovingDoodle /> <LovingDoodle accent="#ff0083" ink="#484848" /> </div> ); } } ``` You can see all illustrations here: https://www.opendoodles.com ### API This a list of props that you can pass down to the component: | Property | Description | Default value | type | | -------- | ------------ | ------------- | ------ | | `ink` | ink color | `#000` | string | | `accent` | accent color | `#FF5678` | string | ## Show your support Give a ⭐️ if this project helped you!