├── .editorconfig ├── .github └── workflows │ └── npmpublish.yml ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── example ├── README.md ├── package.json ├── public │ ├── index.html │ └── manifest.json ├── src │ ├── App.js │ ├── index.css │ └── index.js └── yarn.lock ├── generator.js ├── package.json ├── rollup.config.js ├── src ├── components │ ├── BalletDoodle.tsx │ ├── BikiniDoodle.tsx │ ├── ChillingDoodle.tsx │ ├── ClumsyDoodle.tsx │ ├── CoffeeDoodle.tsx │ ├── DancingDoodle.tsx │ ├── DogJumpDoodle.tsx │ ├── DoggieDoodle.tsx │ ├── FloatDoodle.tsx │ ├── GroovyDoodle.tsx │ ├── IceCreamDoodle.tsx │ ├── JumpingDoodle.tsx │ ├── LayingDoodle.tsx │ ├── LevitateDoodle.tsx │ ├── LovingDoodle.tsx │ ├── MeditatingDoodle.tsx │ ├── MoshingDoodle.tsx │ ├── PettingDoodle.tsx │ ├── PlantDoodle.tsx │ ├── ReadingDoodle.tsx │ ├── ReadingSideDoodle.tsx │ ├── RollerSkatingDoodle.tsx │ ├── RollingDoodle.tsx │ ├── RunningDoodle.tsx │ ├── SelfieDoodle.tsx │ ├── SittingDoodle.tsx │ ├── SittingReadingDoodle.tsx │ ├── SleekDoodle.tsx │ ├── SprintingDoodle.tsx │ ├── StrollingDoodle.tsx │ ├── SwingingDoodle.tsx │ ├── UnboxingDoodle.tsx │ └── ZombieingDoodle.tsx ├── index.ts ├── styles.css ├── test.ts ├── typings.d.ts └── utils.ts ├── tsconfig.json ├── tsconfig.test.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.github/workflows/npmpublish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | on: 3 | release: 4 | types: [created] 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v2 10 | # Setup .npmrc file to publish to npm 11 | - uses: actions/setup-node@v1 12 | with: 13 | node-version: '12.x' 14 | registry-url: 'https://registry.npmjs.org' 15 | scope: '@leocardoso94' # Defaults to the user or organization that owns the workflow file 16 | - run: yarn 17 | - run: yarn publish 18 | env: 19 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | 7 | # builds 8 | build 9 | dist 10 | .rpt2_cache 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 9 4 | - 8 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Luna 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Welcome to react-open-doodles 👋

2 |

3 | 4 | npm version 5 | 6 | 7 | License: MIT 8 | 9 | 10 | Twitter: oilunabr 11 | 12 |

13 | 14 | > A Free Set of Sketchy Illustrations provided by [opendoodles](https://www.opendoodles.com) 15 | 16 |

17 | 18 |

19 | 20 | Open Doodles was created by [Pablo Stanley](https://twitter.com/pablostanley) we use this Illustrations on our site [luna.ac](https://luna.ac). 21 | 22 | This package is only a utility to use the illustrations in your React project. 23 | 24 | ## Install 25 | 26 | ```bash 27 | npm install --save react-open-doodles 28 | // or 29 | yarn add react-open-doodles 30 | ``` 31 | 32 | ## Usage 33 | 34 | ```tsx 35 | import React, { Component } from "react"; 36 | import { LovingDoodle } from "react-open-doodles"; 37 | 38 | export default class App extends Component { 39 | render() { 40 | return ( 41 |
42 | 43 | 44 |
45 | ); 46 | } 47 | } 48 | ``` 49 | 50 | You can see all illustrations here: https://www.opendoodles.com 51 | 52 | ### API 53 | 54 | This a list of props that you can pass down to the component: 55 | 56 | | Property | Description | Default value | type | 57 | | -------- | ------------ | ------------- | ------ | 58 | | `ink` | ink color | `#000` | string | 59 | | `accent` | accent color | `#FF5678` | string | 60 | 61 | ## Show your support 62 | 63 | Give a ⭐️ if this project helped you! 64 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-open-doodles-example", 3 | "homepage": "https://Leocardoso94.github.io/react-open-doodles", 4 | "version": "0.0.0", 5 | "license": "MIT", 6 | "private": true, 7 | "dependencies": { 8 | "prop-types": "^15.6.2", 9 | "react": "^16.4.1", 10 | "react-dom": "^16.4.1", 11 | "react-scripts": "^1.1.4", 12 | "react-open-doodles": "link:.." 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | react-open-doodles 11 | 12 | 13 | 14 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "react-open-doodles", 3 | "name": "react-open-doodles", 4 | "start_url": "./index.html", 5 | "display": "standalone", 6 | "theme_color": "#000000", 7 | "background_color": "#ffffff" 8 | } 9 | -------------------------------------------------------------------------------- /example/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { LovingDoodle } from "react-open-doodles"; 3 | 4 | export default class App extends Component { 5 | render() { 6 | return ( 7 |
8 | 9 | 10 |
11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | import './index.css' 5 | import App from './App' 6 | 7 | ReactDOM.render(, document.getElementById('root')) 8 | -------------------------------------------------------------------------------- /generator.js: -------------------------------------------------------------------------------- 1 | var Crawler = require("crawler"); 2 | const fetch = require("node-fetch"); 3 | const svg2jsx = require("@balajmarius/svg2jsx"); 4 | const fs = require("fs").promises; 5 | 6 | function capitalizeFirstLetter(str) { 7 | return str[0].toUpperCase() + str.slice(1); 8 | } 9 | 10 | function saveComponents(svgs = []) { 11 | return svgs.map(svg => { 12 | return fs.writeFile( 13 | __dirname + "/src/components/" + svg.name + ".tsx", 14 | 'import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils";\n' + 15 | svg.component 16 | ); 17 | }); 18 | } 19 | 20 | function createIndexTsFile(svgs = []) { 21 | const indexTS = svgs.reduce((str, curr) => { 22 | return ( 23 | `export { default as ${curr.name} } from './components/${curr.name}';\n` + 24 | str 25 | ); 26 | }, ""); 27 | 28 | return fs.writeFile(__dirname + "/src/index.ts", indexTS); 29 | } 30 | 31 | function camelize(str) { 32 | let arr = str.split("-"); 33 | let capital = arr.map((item, index) => 34 | index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item 35 | ); 36 | 37 | let capitalString = capital.join(""); 38 | 39 | return capitalString; 40 | } 41 | 42 | async function getSvgHTML(url) { 43 | const res = await fetch(url); 44 | 45 | return await res.text(); 46 | } 47 | 48 | var c = new Crawler({ 49 | maxConnections: 10, 50 | // This will be called for each crawled page 51 | callback: async function(error, res, done) { 52 | if (error) { 53 | console.log(error); 54 | } else { 55 | var $ = res.$; 56 | 57 | const svgs = Object.values($(".collection-item a:nth-child(1)")) 58 | .map(item => { 59 | if (item.attribs) { 60 | return item.attribs.href; 61 | } 62 | return null; 63 | }) 64 | .filter(item => item) 65 | .map(fileUri => { 66 | const name = fileUri.match( 67 | /https:\/\/opendoodles.s3-us-west-1.amazonaws.com\/(.*?).svg/ 68 | )[1]; 69 | 70 | return { 71 | url: fileUri, 72 | name: capitalizeFirstLetter(camelize(name)) + "Doodle" 73 | }; 74 | }); 75 | 76 | const result = await Promise.all( 77 | svgs.map(async svg => { 78 | return { 79 | ...svg, 80 | component: (await getSvgHTML(svg.url).then(svg2jsx)) 81 | .replace( 82 | "function Icon() ", 83 | "const Icon: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => " 84 | ) 85 | .replace(/Icon/g, svg.name) 86 | .replace(/fill="#FF5678"/g, "fill={accent}") 87 | .replace(/fill="#CF536D"/g, "fill={accent}") 88 | .replace(/fill="#000"/g, "fill={ink}") 89 | }; 90 | }) 91 | ); 92 | 93 | createIndexTsFile(result) 94 | 95 | await Promise.all(saveComponents(result)); 96 | } 97 | 98 | done(); 99 | } 100 | }); 101 | 102 | c.queue("https://www.opendoodles.com/"); 103 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-open-doodles", 3 | "version": "1.0.5", 4 | "description": "A Free Set of Sketchy Illustrations provided by https://www.opendoodles.com/", 5 | "author": "Leocardoso94", 6 | "license": "MIT", 7 | "repository": "lunahq/react-open-doodles", 8 | "main": "dist/index.js", 9 | "module": "dist/index.es.js", 10 | "jsnext:main": "dist/index.es.js", 11 | "engines": { 12 | "node": ">=8", 13 | "npm": ">=5" 14 | }, 15 | "scripts": { 16 | "test": "cross-env CI=1 react-scripts-ts test --env=jsdom", 17 | "test:watch": "react-scripts-ts test --env=jsdom", 18 | "build": "rollup -c", 19 | "start": "rollup -c -w", 20 | "prepare": "yarn run build", 21 | "predeploy": "cd example && yarn install && yarn run build", 22 | "deploy": "gh-pages -d example/build" 23 | }, 24 | "dependencies": {}, 25 | "peerDependencies": { 26 | "prop-types": "^15.5.4", 27 | "react": "^15.0.0 || ^16.0.0", 28 | "react-dom": "^15.0.0 || ^16.0.0" 29 | }, 30 | "devDependencies": { 31 | "@balajmarius/svg2jsx": "^2.0.0", 32 | "@svgr/rollup": "^2.4.1", 33 | "@types/jest": "^23.1.5", 34 | "@types/react": "^16.3.13", 35 | "@types/react-dom": "^16.0.5", 36 | "babel-core": "^6.26.3", 37 | "babel-runtime": "^6.26.0", 38 | "crawler": "^1.2.1", 39 | "cross-env": "^5.1.4", 40 | "gh-pages": "^1.2.0", 41 | "node-fetch": "^2.6.0", 42 | "react": "^16.4.1", 43 | "react-dom": "^16.4.1", 44 | "react-scripts-ts": "^2.16.0", 45 | "rollup": "^0.62.0", 46 | "rollup-plugin-babel": "^3.0.7", 47 | "rollup-plugin-commonjs": "^9.1.3", 48 | "rollup-plugin-node-resolve": "^3.3.0", 49 | "rollup-plugin-peer-deps-external": "^2.2.0", 50 | "rollup-plugin-postcss": "^1.6.2", 51 | "rollup-plugin-typescript2": "^0.17.0", 52 | "rollup-plugin-url": "^1.4.0", 53 | "svg2jsx": "^0.1.1", 54 | "typescript": "^2.8.3" 55 | }, 56 | "files": [ 57 | "dist" 58 | ], 59 | "keywords": [ 60 | "react", 61 | "illustration", 62 | "doodles", 63 | "icon" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | // import postcss from 'rollup-plugin-postcss-modules' 5 | import postcss from 'rollup-plugin-postcss' 6 | import resolve from 'rollup-plugin-node-resolve' 7 | import url from 'rollup-plugin-url' 8 | import svgr from '@svgr/rollup' 9 | 10 | import pkg from './package.json' 11 | 12 | export default { 13 | input: 'src/index.ts', 14 | output: [ 15 | { 16 | file: pkg.main, 17 | format: 'cjs', 18 | exports: 'named', 19 | sourcemap: true 20 | }, 21 | { 22 | file: pkg.module, 23 | format: 'es', 24 | exports: 'named', 25 | sourcemap: true 26 | } 27 | ], 28 | plugins: [ 29 | external(), 30 | postcss({ 31 | modules: true 32 | }), 33 | url(), 34 | svgr(), 35 | resolve(), 36 | typescript({ 37 | rollupCommonJSResolveHack: true, 38 | clean: true 39 | }), 40 | commonjs() 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /src/components/ChillingDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const ChillingDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default ChillingDoodle; 22 | -------------------------------------------------------------------------------- /src/components/CoffeeDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const CoffeeDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 13 | 17 | 21 | 25 | 26 | 27 | 28 | ); 29 | } 30 | 31 | export default CoffeeDoodle; 32 | -------------------------------------------------------------------------------- /src/components/IceCreamDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const IceCreamDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 13 | 17 | 21 | 25 | 29 | 33 | 34 | 35 | 36 | ); 37 | } 38 | 39 | export default IceCreamDoodle; 40 | -------------------------------------------------------------------------------- /src/components/JumpingDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const JumpingDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default JumpingDoodle; 22 | -------------------------------------------------------------------------------- /src/components/LayingDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const LayingDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default LayingDoodle; 22 | -------------------------------------------------------------------------------- /src/components/LevitateDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const LevitateDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 13 | 17 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default LevitateDoodle; 28 | -------------------------------------------------------------------------------- /src/components/LovingDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const LovingDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 13 | 17 | 21 | 25 | 26 | 27 | 28 | ); 29 | } 30 | 31 | export default LovingDoodle; 32 | -------------------------------------------------------------------------------- /src/components/RollingDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const RollingDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 13 | 17 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default RollingDoodle; 28 | -------------------------------------------------------------------------------- /src/components/RunningDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const RunningDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default RunningDoodle; 22 | -------------------------------------------------------------------------------- /src/components/SprintingDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const SprintingDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default SprintingDoodle; 22 | -------------------------------------------------------------------------------- /src/components/ZombieingDoodle.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_INK, DEFAULT_ACCENT, Props } from "../utils"; 2 | import React from "react"; 3 | 4 | const ZombieingDoodle: React.FC = ({ink = DEFAULT_INK, accent = DEFAULT_ACCENT}) => { 5 | return ( 6 | 7 | 8 | 12 | 13 | 17 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default ZombieingDoodle; 28 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ClumsyDoodle } from './components/ClumsyDoodle'; 2 | export { default as UnboxingDoodle } from './components/UnboxingDoodle'; 3 | export { default as DogJumpDoodle } from './components/DogJumpDoodle'; 4 | export { default as BikiniDoodle } from './components/BikiniDoodle'; 5 | export { default as LevitateDoodle } from './components/LevitateDoodle'; 6 | export { default as SleekDoodle } from './components/SleekDoodle'; 7 | export { default as IceCreamDoodle } from './components/IceCreamDoodle'; 8 | export { default as SittingReadingDoodle } from './components/SittingReadingDoodle'; 9 | export { default as ReadingSideDoodle } from './components/ReadingSideDoodle'; 10 | export { default as JumpingDoodle } from './components/JumpingDoodle'; 11 | export { default as GroovyDoodle } from './components/GroovyDoodle'; 12 | export { default as BalletDoodle } from './components/BalletDoodle'; 13 | export { default as RollerSkatingDoodle } from './components/RollerSkatingDoodle'; 14 | export { default as SwingingDoodle } from './components/SwingingDoodle'; 15 | export { default as PlantDoodle } from './components/PlantDoodle'; 16 | export { default as PettingDoodle } from './components/PettingDoodle'; 17 | export { default as ChillingDoodle } from './components/ChillingDoodle'; 18 | export { default as RollingDoodle } from './components/RollingDoodle'; 19 | export { default as StrollingDoodle } from './components/StrollingDoodle'; 20 | export { default as DancingDoodle } from './components/DancingDoodle'; 21 | export { default as SittingDoodle } from './components/SittingDoodle'; 22 | export { default as SprintingDoodle } from './components/SprintingDoodle'; 23 | export { default as CoffeeDoodle } from './components/CoffeeDoodle'; 24 | export { default as LovingDoodle } from './components/LovingDoodle'; 25 | export { default as MoshingDoodle } from './components/MoshingDoodle'; 26 | export { default as DoggieDoodle } from './components/DoggieDoodle'; 27 | export { default as RunningDoodle } from './components/RunningDoodle'; 28 | export { default as LayingDoodle } from './components/LayingDoodle'; 29 | export { default as FloatDoodle } from './components/FloatDoodle'; 30 | export { default as SelfieDoodle } from './components/SelfieDoodle'; 31 | export { default as ZombieingDoodle } from './components/ZombieingDoodle'; 32 | export { default as MeditatingDoodle } from './components/MeditatingDoodle'; 33 | export { default as ReadingDoodle } from './components/ReadingDoodle'; 34 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* add css styles here (optional) */ 2 | 3 | .test { 4 | display: inline-block; 5 | margin: 2em auto; 6 | border: 2px solid #000; 7 | font-size: 2em; 8 | } 9 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | import ExampleComponent from './' 2 | 3 | describe('ExampleComponent', () => { 4 | it('is truthy', () => { 5 | expect(ExampleComponent).toBeTruthy() 6 | }) 7 | }) 8 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Default CSS definition for typescript, 3 | * will be overridden with file-specific definitions by rollup 4 | */ 5 | declare module '*.css' { 6 | const content: { [className: string]: string }; 7 | export default content; 8 | } 9 | 10 | interface SvgrComponent extends React.StatelessComponent> {} 11 | 12 | declare module '*.svg' { 13 | const svgUrl: string; 14 | const svgComponent: SvgrComponent; 15 | export default svgUrl; 16 | export { svgComponent as ReactComponent } 17 | } 18 | -------------------------------------------------------------------------------- /src/utils.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_INK = "#000"; 2 | 3 | export const DEFAULT_ACCENT = "#FF5678"; 4 | 5 | export interface Props { 6 | ink?: string; 7 | accent?: string; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "build", 4 | "module": "esnext", 5 | "target": "es5", 6 | "lib": ["es6", "dom", "es2016", "es2017"], 7 | "sourceMap": true, 8 | "allowJs": false, 9 | "jsx": "react", 10 | "declaration": true, 11 | "moduleResolution": "node", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noImplicitAny": true, 16 | "strictNullChecks": true, 17 | "suppressImplicitAnyIndexErrors": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "allowSyntheticDefaultImports": true 21 | }, 22 | "include": ["src"], 23 | "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"] 24 | } 25 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | } 6 | } --------------------------------------------------------------------------------