├── .gitignore
├── src
    ├── library
    │   ├── .gitignore
    │   ├── icons
    │   │   ├── burgerRotate
    │   │   │   ├── styles.css
    │   │   │   └── BurgerRotate.tsx
    │   │   ├── chevronClose
    │   │   │   ├── ChevronClose.tsx
    │   │   │   └── styles.css
    │   │   ├── burgerDank
    │   │   │   ├── BurgerDank.tsx
    │   │   │   └── styles.css
    │   │   ├── burgerSpin
    │   │   │   ├── BurgerSpin.tsx
    │   │   │   └── styles.css
    │   │   ├── burgerArrow
    │   │   │   ├── BurgerArrow.tsx
    │   │   │   └── styles.css
    │   │   ├── burgerSwipe
    │   │   │   ├── BurgerSwipe.tsx
    │   │   │   └── styles.css
    │   │   ├── burgerClose
    │   │   │   ├── BurgerClose.tsx
    │   │   │   └── styles.css
    │   │   ├── burgerVeggie
    │   │   │   ├── BurgerVeggie.tsx
    │   │   │   └── styles.css
    │   │   ├── burgerBoughie
    │   │   │   ├── BurgerBoughie.tsx
    │   │   │   └── styles.css
    │   │   ├── burgerFade
    │   │   │   ├── BurgerFade.tsx
    │   │   │   └── styles.css
    │   │   └── burger.css
    │   ├── index.ts
    │   ├── index.d.ts
    │   ├── package.json
    │   └── README.md
    ├── react-app-env.d.ts
    ├── types.d.ts
    ├── index.tsx
    ├── index.css
    ├── components
    │   ├── CodeButton.tsx
    │   └── Docs.tsx
    ├── App.tsx
    └── App.css
├── public
    ├── robots.txt
    ├── favicon.png
    ├── manifest.json
    └── index.html
├── tsconfig.json
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/src/library/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/react-icons-animated/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/src/library/icons/burgerRotate/styles.css:
--------------------------------------------------------------------------------
1 | .burger.burger-rotate.is-closed {
2 |   transform: rotate(90deg);
3 | }
4 | 


--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
 1 | type IconComponent = {
 2 |   name: string;
 3 |   Icon: FC<IconProps>;
 4 | };
 5 | 
 6 | type IconProps = {
 7 |   isClosed?: boolean;
 8 |   className?: string;
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/library/icons/chevronClose/ChevronClose.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "./styles.css";
3 | 
4 | export const ChevronClose: FC<IconProps> = ({ isClosed }) => (
5 |   <span className={`chevron-close ${isClosed ? "is-closed" : ""}`} />
6 | );
7 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerDank/BurgerDank.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "../burger.css";
3 | import "./styles.css";
4 | 
5 | export const BurgerDank: FC<IconProps> = ({ isClosed }) => (
6 |   <span className={`burger burger-dank ${isClosed && "is-closed"}`} />
7 | );
8 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerSpin/BurgerSpin.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "../burger.css";
3 | import "./styles.css";
4 | 
5 | export const BurgerSpin: FC<IconProps> = ({ isClosed }) => (
6 |   <span className={`burger burger-spin ${isClosed && "is-closed"}`} />
7 | );
8 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerArrow/BurgerArrow.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "../burger.css";
3 | import "./styles.css";
4 | 
5 | export const BurgerArrow: FC<IconProps> = ({ isClosed }) => (
6 |   <span className={`burger burger-arrow ${isClosed && "is-closed"}`} />
7 | );
8 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerSwipe/BurgerSwipe.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "../burger.css";
3 | import "./styles.css";
4 | 
5 | export const BurgerSwipe: FC<IconProps> = ({ isClosed }) => (
6 |   <span className={`burger burger-swipe ${isClosed && "is-closed"}`} />
7 | );
8 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerClose/BurgerClose.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "../burger.css";
3 | import "./styles.css";
4 | 
5 | export const BurgerClose: FC<IconProps> = ({ isClosed }) => (
6 |   <span className={`burger burger-close ${isClosed ? "is-closed" : ""}`} />
7 | );
8 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerRotate/BurgerRotate.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "../burger.css";
3 | import "./styles.css";
4 | 
5 | export const BurgerRotate: FC<IconProps> = ({ isClosed }) => (
6 |   <span className={`burger burger-rotate ${isClosed && "is-closed"}`} />
7 | );
8 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerVeggie/BurgerVeggie.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "../burger.css";
3 | import "./styles.css";
4 | 
5 | export const BurgerVeggie: FC<IconProps> = ({ isClosed }) => (
6 |   <span className={`burger burger-veggie ${isClosed && "is-closed"}`} />
7 | );
8 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerBoughie/BurgerBoughie.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import "../burger.css";
3 | import "./styles.css";
4 | 
5 | export const BurgerBoughie: FC<IconProps> = ({ isClosed }) => (
6 |   <span className={`burger burger-boughie ${isClosed && "is-closed"}`} />
7 | );
8 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | 
 6 | const root = ReactDOM.createRoot(
 7 |   document.getElementById("root") as HTMLElement
 8 | );
 9 | root.render(
10 |   <React.StrictMode>
11 |     <App />
12 |   </React.StrictMode>
13 | );
14 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerFade/BurgerFade.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from "react";
 2 | import "../burger.css";
 3 | import "./styles.css";
 4 | 
 5 | export const BurgerFade: FC<IconProps> = ({ isClosed }) => (
 6 |   <div className="burger-fade-wrap">
 7 |     <span className={`burger burger-fade-top ${isClosed && "is-closed"}`} />
 8 |     <span className={`burger burger-fade ${isClosed && "is-closed"}`} />
 9 |   </div>
10 | );
11 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerClose/styles.css:
--------------------------------------------------------------------------------
 1 | .burger.burger-close,
 2 | .burger.burger-close::before,
 3 | .burger.burger-close::after {
 4 |   transition-timing-function: linear;
 5 |   transition-duration: 0.15s;
 6 | }
 7 | 
 8 | .burger.burger-close.is-closed {
 9 |   background: transparent;
10 | }
11 | 
12 | .burger.burger-close.is-closed::before {
13 |   transform: rotate(-45deg) translate(-5px, 5px);
14 | }
15 | 
16 | .burger.burger-close.is-closed::after {
17 |   transform: rotate(45deg) translate(-5px, -7px);
18 | }
19 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerSpin/styles.css:
--------------------------------------------------------------------------------
 1 | .burger.burger-spin::before,
 2 | .burger.burger-spin::after {
 3 |   transition-timing-function: linear;
 4 |   transition-duration: 0.1s;
 5 | }
 6 | 
 7 | .burger.burger-spin.is-closed {
 8 |   transform: rotate(360deg);
 9 |   background: transparent;
10 | }
11 | 
12 | .burger.burger-spin.is-closed::before {
13 |   transform: rotate(-45deg) translate(-6px, 5px);
14 | }
15 | 
16 | .burger.burger-spin.is-closed::after {
17 |   transform: rotate(45deg) translate(-5px, -6px);
18 | }
19 | 


--------------------------------------------------------------------------------
/src/library/icons/burger.css:
--------------------------------------------------------------------------------
 1 | .burger {
 2 |   position: relative;
 3 |   width: 32px;
 4 | }
 5 | 
 6 | .burger,
 7 | .burger::before,
 8 | .burger::after {
 9 |   display: block;
10 |   border-radius: 2px;
11 |   height: 2px;
12 |   background: #f9f9f9;
13 |   transition: 0.3s;
14 | }
15 | 
16 | .burger::before,
17 | .burger::after {
18 |   content: "";
19 |   position: absolute;
20 |   left: 0;
21 |   width: 100%;
22 | }
23 | 
24 | .burger::before {
25 |   top: -8px;
26 | }
27 | 
28 | .burger::after {
29 |   top: 8px;
30 | }
31 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   background: #1d1e22;
 4 |   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
 5 |     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 6 |     sans-serif;
 7 |   -webkit-font-smoothing: antialiased;
 8 |   -moz-osx-font-smoothing: grayscale;
 9 | }
10 | 
11 | html,
12 | body,
13 | #root {
14 |   height: 100%;
15 | }
16 | 
17 | * {
18 |   box-sizing: border-box;
19 | }
20 | 
21 | h2 {
22 |   margin: 0;
23 |   font-weight: 400;
24 | }
25 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerArrow/styles.css:
--------------------------------------------------------------------------------
 1 | .burger.burger-arrow::before,
 2 | .burger.burger-arrow::after {
 3 |   transition-duration: 0.15s;
 4 |   transition-timing-function: linear;
 5 | }
 6 | 
 7 | .burger.burger-arrow.is-closed::before,
 8 | .burger.burger-arrow.is-closed::after {
 9 |   width: 20px;
10 | }
11 | 
12 | .burger.burger-arrow.is-closed::before {
13 |   transform: rotate(-45deg) translate(-4px, -2px);
14 | }
15 | 
16 | .burger.burger-arrow.is-closed::after {
17 |   transform: rotate(45deg) translate(-4px, 2px);
18 | }
19 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerBoughie/styles.css:
--------------------------------------------------------------------------------
 1 | .burger.burger-boughie {
 2 |   transition: none;
 3 | }
 4 | 
 5 | .burger.burger-boughie::before,
 6 | .burger.burger-boughie::after {
 7 |   transition-timing-function: linear;
 8 |   transition-duration: 0.3s;
 9 | }
10 | 
11 | .burger.burger-boughie.is-closed {
12 |   height: 0;
13 | }
14 | 
15 | .burger.burger-boughie.is-closed::before {
16 |   transform: rotate(-405deg) translate(-6px, 4px);
17 | }
18 | 
19 | .burger.burger-boughie.is-closed::after {
20 |   transform: rotate(405deg) translate(-6px, -6px);
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/CodeButton.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, ReactNode } from "react";
 2 | 
 3 | type Props = {
 4 |   children: ReactNode;
 5 |   onClick: (name: string) => void;
 6 | };
 7 | 
 8 | export const CodeButton: FC<Props> = ({ children, onClick }) => (
 9 |   <button
10 |     onClick={() => onClick(children?.toString()!)}
11 |     className="code-button"
12 |     type="button"
13 |   >
14 |     <span className="code-button-text">Code</span>
15 |     <span className="code-icon">
16 |       <span></span>
17 |       <span></span>
18 |     </span>
19 |   </button>
20 | );
21 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerSwipe/styles.css:
--------------------------------------------------------------------------------
 1 | .burger.burger-swipe,
 2 | .burger.burger-swipe::before,
 3 | .burger.burger-swipe::after {
 4 |   transition-timing-function: ease-in-out;
 5 |   transition-duration: 0.2s;
 6 | }
 7 | 
 8 | .burger.burger-swipe.is-closed {
 9 |   transform: translateX(-50px);
10 |   background: transparent;
11 | }
12 | 
13 | .burger.burger-swipe.is-closed::before {
14 |   transform: rotate(-45deg) translate(30px, 40px);
15 | }
16 | 
17 | .burger.burger-swipe.is-closed::after {
18 |   transform: rotate(45deg) translate(30px, -42px);
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "esModuleInterop": true,
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "noFallthroughCasesInSwitch": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src"]
20 | }
21 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.png",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "favicon.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "favicon.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerVeggie/styles.css:
--------------------------------------------------------------------------------
 1 | .burger.burger-veggie {
 2 |   transition: none;
 3 |   height: 0;
 4 | }
 5 | 
 6 | .burger.burger-veggie::before,
 7 | .burger.burger-veggie::after {
 8 |   transition-timing-function: linear;
 9 |   transition-duration: 0.15s;
10 | }
11 | 
12 | .burger.burger-veggie::before {
13 |   top: -4px;
14 | }
15 | 
16 | .burger.burger-veggie::after {
17 |   top: 3px;
18 | }
19 | 
20 | .burger.burger-veggie.is-closed::before {
21 |   transform: rotate(-45deg) translate(-3px, 2px);
22 | }
23 | 
24 | .burger.burger-veggie.is-closed::after {
25 |   transform: rotate(45deg) translate(-2px, -3px);
26 | }
27 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerFade/styles.css:
--------------------------------------------------------------------------------
 1 | .burger-fade-wrap {
 2 |   position: relative;  
 3 | }
 4 | 
 5 | .burger.burger-fade-top::before {
 6 |   opacity: 0;
 7 |   transform: rotate(-45deg) translate(-4px, 6px);
 8 |   top: -8px;
 9 | }
10 | .burger.burger-fade-top {
11 |   height: 0;
12 | }
13 | .burger.burger-fade-top::after {
14 |   opacity: 0;
15 |   transform: rotate(45deg) translate(-4px, -8px);
16 |   top: 8px;
17 | }
18 | .burger.burger-fade-top.is-closed::before,
19 | .burger.burger-fade-top.is-closed::after {
20 |   opacity: 1;
21 | }
22 | .burger.burger-fade {
23 |   opacity: 1;
24 | }
25 | .burger.burger-fade.is-closed {
26 |   opacity: 0;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/library/index.ts:
--------------------------------------------------------------------------------
 1 | export { BurgerRotate } from "./icons/burgerRotate/BurgerRotate";
 2 | export { BurgerArrow } from "./icons/burgerArrow/BurgerArrow";
 3 | export { BurgerClose } from "./icons/burgerClose/BurgerClose";
 4 | export { BurgerSwipe } from "./icons/burgerSwipe/BurgerSwipe";
 5 | export { BurgerVeggie } from "./icons/burgerVeggie/BurgerVeggie";
 6 | export { BurgerDank } from "./icons/burgerDank/BurgerDank";
 7 | export { BurgerBoughie } from "./icons/burgerBoughie/BurgerBoughie";
 8 | export { BurgerSpin } from "./icons/burgerSpin/BurgerSpin";
 9 | export { BurgerFade } from "./icons/burgerFade/BurgerFade";
10 | export { ChevronClose } from "./icons/chevronClose/ChevronClose";
11 | 


--------------------------------------------------------------------------------
/src/library/index.d.ts:
--------------------------------------------------------------------------------
 1 | export type IconProps = {
 2 |   isClosed?: boolean;
 3 | };
 4 | 
 5 | export { BurgerRotate } from "./icons/burgerRotate/BurgerRotate";
 6 | export { BurgerArrow } from "./icons/burgerArrow/BurgerArrow";
 7 | export { BurgerClose } from "./icons/burgerClose/BurgerClose";
 8 | export { BurgerSwipe } from "./icons/burgerSwipe/BurgerSwipe";
 9 | export { BurgerVeggie } from "./icons/burgerVeggie/BurgerVeggie";
10 | export { BurgerDank } from "./icons/burgerDank/BurgerDank";
11 | export { BurgerBoughie } from "./icons/burgerBoughie/BurgerBoughie";
12 | export { BurgerSpin } from "./icons/burgerSpin/BurgerSpin";
13 | export { BurgerFade } from "./icons/burgerFade/BurgerFade";
14 | export { ChevronClose } from "./icons/chevronClose/ChevronClose";
15 | 


--------------------------------------------------------------------------------
/src/library/icons/burgerDank/styles.css:
--------------------------------------------------------------------------------
 1 | .burger.burger-dank,
 2 | .burger.burger-dank::before,
 3 | .burger.burger-dank::after {
 4 |   transition-timing-function: ease-in-out;
 5 |   transition-duration: 0.2s;
 6 | }
 7 | 
 8 | .burger.burger-dank::before,
 9 | .burger.burger-dank::after {
10 |   width: 16px;
11 | }
12 | 
13 | .burger.burger-dank::before {
14 |   left: 0;
15 |   transform-origin: 100% 0%;
16 | }
17 | 
18 | .burger.burger-dank::after {
19 |   left: 16px;
20 |   transform-origin: 0% 100%;
21 | }
22 | 
23 | .burger.burger-dank.is-closed {
24 |   transform: rotate(-45deg);
25 | }
26 | 
27 | .burger.burger-dank.is-closed::before {
28 |   transform: rotate(90deg) translate(10px, -1px);
29 | }
30 | 
31 | .burger.burger-dank.is-closed::after {
32 |   transform: rotate(90deg) translate(-9px, 1px);
33 |   width: 16px;
34 | }
35 | 


--------------------------------------------------------------------------------
/src/library/icons/chevronClose/styles.css:
--------------------------------------------------------------------------------
 1 | .chevron-close {
 2 |   position: relative;
 3 |   width: 32px;
 4 | }
 5 | 
 6 | .chevron-close,
 7 | .chevron-close::before,
 8 | .chevron-close::after {
 9 |   display: block;
10 | }
11 | 
12 | .chevron-close::before,
13 | .chevron-close::after {
14 |   content: "";
15 |   position: absolute;
16 |   top: 0;
17 |   border-radius: 2px;
18 |   height: 2px;
19 |   width: 14px;
20 |   background: #f9f9f9;
21 |   transition: 0.3s;
22 | }
23 | 
24 | .chevron-close::before {
25 |   rotate: 45deg;
26 |   left: 4.5px;
27 | }
28 | 
29 | .chevron-close::after {
30 |   rotate: -45deg;
31 |   right: 4.5px;
32 | }
33 | 
34 | .chevron-close.is-closed::before {
35 |   width: 100%;
36 |   translate: -4px 0;
37 | }
38 | 
39 | .chevron-close.is-closed::after {
40 |   width: 100%;
41 |   translate: 4px 0;
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-icons-animated-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@types/node": "^16.11.60",
 7 |     "@types/react": "^18.0.21",
 8 |     "@types/react-dom": "^18.0.6",
 9 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "react-scripts": "5.0.1",
12 |     "react-syntax-highlighter": "^15.5.0",
13 |     "typescript": "^4.8.3"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build"
18 |   },
19 |   "eslintConfig": {
20 |     "extends": [
21 |       "react-app"
22 |     ]
23 |   },
24 |   "browserslist": {
25 |     "production": [
26 |       ">0.2%",
27 |       "not dead",
28 |       "not op_mini all"
29 |     ],
30 |     "development": [
31 |       "last 1 chrome version",
32 |       "last 1 firefox version",
33 |       "last 1 safari version"
34 |     ]
35 |   },
36 |   "devDependencies": {
37 |     "@types/react-syntax-highlighter": "^15.5.5"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/library/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-icons-animated",
 3 |   "version": "1.0.2",
 4 |   "description": "Library for adding animated icons to React apps",
 5 |   "main": "dist/index.js",
 6 |   "files": [
 7 |     "dist/index.js",
 8 |     "dist/index.d.ts",
 9 |     "dist/icons",
10 |     "README.md"
11 |   ],
12 |   "types": "dist/index.d.ts",
13 |   "scripts": {
14 |     "test": "echo \"Error: no test specified\" && exit 1",
15 |     "publish:npm": "rm -Rf dist && mkdir dist && babel  --extensions .ts index.ts -d dist --copy-files && babel index.d.ts -d dist --copy-files && babel --extensions .ts,.tsx ./icons -d dist/icons --copy-files"
16 |   },
17 |   "author": "@frontendjoe",
18 |   "license": "MIT",
19 |   "babel": {
20 |     "presets": [
21 |       [
22 |         "@babel/react",
23 |         {
24 |           "runtime": "automatic"
25 |         }
26 |       ],
27 |       [
28 |         "@babel/preset-typescript"
29 |       ],
30 |       [
31 |         "@babel/preset-env"
32 |       ]
33 |     ]
34 |   },
35 |   "devDependencies": {
36 |     "@babel/cli": "^7.18.10",
37 |     "@babel/preset-env": "^7.19.1",
38 |     "@babel/preset-react": "^7.18.6",
39 |     "@babel/preset-typescript": "^7.18.6"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/Docs.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from "react";
 2 | 
 3 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 4 | import { atomDark as style } from "react-syntax-highlighter/dist/esm/styles/prism";
 5 | 
 6 | type Props = {
 7 |   setActiveBurger: (args0: IconComponent | undefined) => void;
 8 |   activeBurger: IconComponent | undefined;
 9 | };
10 | 
11 | const example = (name: string) => `
12 | import { Burger${name} } 
13 |   from "react-burger-icons";
14 | 
15 | import { useState } from "react";
16 | 
17 | export const App = () => {
18 |   const [isClosed, setIsClosed] = 
19 |     useState<boolean>(false);
20 | 
21 |   return (
22 |     <button
23 |       onClick={() => setIsClosed(!isClosed)}
24 |       style={{
25 |         width: "50px",
26 |         height: "50px",
27 |         display: "grid",
28 |         placeItems: "center",
29 |       }}
30 |     >
31 |       <Burger${name} isClosed={isClosed} />
32 |     </button>
33 |   );
34 | }
35 | `;
36 | 
37 | export const Docs: FC<Props> = ({ activeBurger, setActiveBurger }) => (
38 |   <aside className="docs">
39 |     <button
40 |       onClick={() => setActiveBurger(undefined)}
41 |       className="docs-close-button"
42 |     >
43 |       Close
44 |     </button>
45 |     <h2>Burger{activeBurger?.name}</h2>
46 | 
47 |     <p>1. Install the npm package</p>
48 | 
49 |     <SyntaxHighlighter
50 |       customStyle={{
51 |         borderRadius: 0,
52 |         margin: "10px 24px 30px",
53 |         padding: "20px 24px",
54 |         background: "#1d1e22",
55 |         fontSize: "14px",
56 |       }}
57 |       language="tsx"
58 |       style={style}
59 |     >
60 |       npm i react-burger-icons
61 |     </SyntaxHighlighter>
62 | 
63 |     <p>2. Create button and hookup icon</p>
64 | 
65 |     <SyntaxHighlighter
66 |       customStyle={{
67 |         borderRadius: 0,
68 |         margin: "10px 24px 30px",
69 |         padding: "0 24px 24px",
70 |         background: "#1d1e22",
71 |         fontSize: "14px",
72 |       }}
73 |       language="tsx"
74 |       style={style}
75 |     >
76 |       {example(activeBurger?.name!)}
77 |     </SyntaxHighlighter>
78 |   </aside>
79 | );
80 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
28 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
29 |     <link
30 |       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
31 |       rel="stylesheet"
32 |     />
33 |     <title>React Icons Animated</title>
34 |   </head>
35 |   <body>
36 |     <noscript>You need to enable JavaScript to run this app.</noscript>
37 |     <div id="root"></div>
38 |     <!--
39 |       This HTML file is a template.
40 |       If you open it directly in the browser, you will see an empty page.
41 | 
42 |       You can add webfonts, meta tags, or analytics to this file.
43 |       The build step will place the bundled scripts into the <body> tag.
44 | 
45 |       To begin the development, run `npm start` or `yarn start`.
46 |       To create a production bundle, use `npm run build` or `yarn build`.
47 |     -->
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   BurgerRotate,
 3 |   BurgerArrow,
 4 |   BurgerClose,
 5 |   BurgerSwipe,
 6 |   BurgerVeggie,
 7 |   BurgerDank,
 8 |   BurgerBoughie,
 9 |   BurgerSpin,
10 |   ChevronClose,
11 | } from "./library";
12 | import "./App.css";
13 | import { useEffect, useState } from "react";
14 | 
15 | import { Docs } from "./components/Docs";
16 | import { CodeButton } from "./components/CodeButton";
17 | 
18 | const burgers: IconComponent[] = [
19 |   { name: "Rotate", Icon: BurgerRotate },
20 |   { name: "Arrow", Icon: BurgerArrow },
21 |   { name: "Close", Icon: BurgerClose },
22 |   { name: "Swipe", Icon: BurgerSwipe },
23 |   { name: "Veggie", Icon: BurgerVeggie },
24 |   { name: "Dank", Icon: BurgerDank },
25 |   { name: "Boughie", Icon: BurgerBoughie },
26 |   { name: "Spin", Icon: BurgerSpin },
27 |   { name: "ChevronClose", Icon: ChevronClose },
28 | ];
29 | 
30 | function App() {
31 |   const [isClosedList, setIsClosedList] = useState<boolean[]>([]);
32 |   const [activeBurger, setActiveBurger] = useState<IconComponent | undefined>();
33 | 
34 |   const handleBurgerClicked = (index: number) => {
35 |     const isClosedListCopy = [...isClosedList];
36 |     isClosedListCopy[index] = !isClosedListCopy[index];
37 |     setIsClosedList(isClosedListCopy);
38 |   };
39 | 
40 |   const handleCodeButtonClicked = (name: string) => {
41 |     const foundBurger = burgers.find((b) => b.name === name);
42 |     setActiveBurger(foundBurger);
43 |   };
44 | 
45 |   useEffect(() => {
46 |     setIsClosedList(burgers.map(() => false));
47 |   }, []);
48 | 
49 |   return (
50 |     <main className={`wrapper ${activeBurger && "is-docs-open"}`}>
51 |       <div className="burgers">
52 |         {burgers.map(({ name, Icon }, index) => (
53 |           <div className="cell" key={name}>
54 |             <CodeButton onClick={handleCodeButtonClicked}>{name}</CodeButton>
55 |             <h2 className="cell-title">{name}</h2>
56 |             <button onClick={() => handleBurgerClicked(index)}>
57 |               <Icon isClosed={isClosedList[index]} />
58 |             </button>
59 |           </div>
60 |         ))}
61 |       </div>
62 |       <Docs activeBurger={activeBurger} setActiveBurger={setActiveBurger} />
63 |     </main>
64 |   );
65 | }
66 | 
67 | export default App;
68 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-icons-animated
 2 | 
 3 | Collection of animated icons to use in React apps.
 4 | 
 5 | ## Get Started
 6 | 
 7 | Follow these simple steps:
 8 | 
 9 | ### 1. Install the npm package
10 | 
11 | You can also install it via yarn.
12 | 
13 | ```sh
14 | npm i react-icons-animated
15 | ```
16 | 
17 | ### 2. Create button and hookup icon
18 | 
19 | The libary is built with TypeScript, intellisense shows available icons.
20 | 
21 | ```ts
22 | import { BurgerClose as Icon } from "react-icons-animated";
23 | 
24 | import { useState } from "react";
25 | 
26 | export const App = () => {
27 |   const [isClosed, setIsClosed] = useState<boolean>(false);
28 | 
29 |   return (
30 |     <button
31 |       onClick={() => setIsClosed(!isClosed)}
32 |       style={{
33 |         width: "50px",
34 |         height: "50px",
35 |         display: "grid",
36 |         placeItems: "center",
37 |       }}
38 |     >
39 |       <Icon isClosed={isClosed} />
40 |     </button>
41 |   );
42 | };
43 | ```
44 | 
45 | ## Props
46 | 
47 | Icons components can implement an "isClosed" prop that is controlled by a parent component. You'll see [in the examples](https://icons.frontendjoe.com/) which components accept this prop.
48 | 
49 | | Name     | Type    | Default |
50 | | -------- | ------- | ------- |
51 | | isClosed | boolean | false   |
52 | 
53 | [You can find all of the examples here](https://icons.frontendjoe.com/)
54 | 
55 | ## Licence
56 | 
57 | The MIT License (MIT)
58 | 
59 | Copyright (c) 2022 @frontendjoe
60 | 
61 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
62 | 
63 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
64 | 
65 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
66 | 
67 | ## Contributions
68 | 
69 | I'm currently looking for contributors to help out with this project. Lookout for contribution instructions in the coming weeks, or send me a message on [Instagram](https://instagram.com/frontendjoe/) to register interest.
70 | 


--------------------------------------------------------------------------------
/src/library/README.md:
--------------------------------------------------------------------------------
 1 | # react-icons-animated
 2 | 
 3 | Collection of animated icons to use in React apps.
 4 | 
 5 | ## Get Started
 6 | 
 7 | Follow these simple steps:
 8 | 
 9 | ### 1. Install the npm package
10 | 
11 | You can also install it via yarn.
12 | 
13 | ```sh
14 | npm i react-icons-animated
15 | ```
16 | 
17 | ### 2. Create button and hookup icon
18 | 
19 | The libary is built with TypeScript, intellisense shows available icons.
20 | 
21 | ```ts
22 | import { BurgerClose as Icon } from "react-icons-animated";
23 | 
24 | import { useState } from "react";
25 | 
26 | export const App = () => {
27 |   const [isClosed, setIsClosed] = useState<boolean>(false);
28 | 
29 |   return (
30 |     <button
31 |       onClick={() => setIsClosed(!isClosed)}
32 |       style={{
33 |         width: "50px",
34 |         height: "50px",
35 |         display: "grid",
36 |         placeItems: "center",
37 |       }}
38 |     >
39 |       <Icon isClosed={isClosed} />
40 |     </button>
41 |   );
42 | };
43 | ```
44 | 
45 | ## Props
46 | 
47 | Icons components can implement an "isClosed" prop that is controlled by a parent component. You'll see [in the examples](https://icons.frontendjoe.com/) which components accept this prop.
48 | 
49 | | Name     | Type    | Default |
50 | | -------- | ------- | ------- |
51 | | isClosed | boolean | false   |
52 | 
53 | [You can find all of the examples here](https://icons.frontendjoe.com/)
54 | 
55 | ## Licence
56 | 
57 | The MIT License (MIT)
58 | 
59 | Copyright (c) 2022 @frontendjoe
60 | 
61 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
62 | 
63 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
64 | 
65 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
66 | 
67 | ## Contributions
68 | 
69 | I'm currently looking for contributors to help out with this project. Lookout for contribution instructions in the coming weeks, or send me a message on [Instagram](https://instagram.com/frontendjoe/) to register interest.
70 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | .wrapper {
  2 |   min-height: 100%;
  3 |   display: flex;
  4 | }
  5 | 
  6 | .wrapper.is-docs-open .docs-close-button {
  7 |   opacity: 1;
  8 |   visibility: visible;
  9 | }
 10 | 
 11 | .wrapper.is-docs-open .docs {
 12 |   width: 500px;
 13 |   max-width: 500px;
 14 | }
 15 | 
 16 | .burgers {
 17 |   flex: 4 4 auto;
 18 |   display: grid;
 19 |   grid-template-columns: repeat(3, 1fr);
 20 | }
 21 | 
 22 | .cell {
 23 |   position: relative;
 24 |   display: grid;
 25 |   place-items: center;
 26 |   min-height: 500px;
 27 |   min-width: 100px;
 28 | }
 29 | 
 30 | .cell:nth-child(odd) {
 31 |   background: #30323c;
 32 | }
 33 | 
 34 | .cell-title {
 35 |   position: absolute;
 36 |   top: 130px;
 37 |   left: 50%;
 38 |   transform: translateX(-50%);
 39 |   color: #f9f9f9;
 40 |   font-size: 18px;
 41 |   font-weight: 400;
 42 | }
 43 | 
 44 | button {
 45 |   position: relative;
 46 |   display: grid;
 47 |   place-items: center;
 48 |   width: 40px;
 49 |   height: 40px;
 50 |   padding: 0;
 51 |   border: 0;
 52 |   background: transparent;
 53 |   cursor: pointer;
 54 | }
 55 | 
 56 | /* button debug styles */
 57 | /* always comment before pushing!!! */
 58 | /* button {
 59 |   background: hotpink;
 60 | }
 61 | 
 62 | button::after {
 63 |   content: "";
 64 |   display: block;
 65 |   position: absolute;
 66 |   top: 0;
 67 |   right: 0;
 68 |   width: 50%;
 69 |   height: 100%;
 70 |   background: rgba(0, 0, 0, 0.2);
 71 | } */
 72 | 
 73 | .docs {
 74 |   flex: 1 1 auto;
 75 |   width: 0;
 76 |   max-width: 0;
 77 |   overflow: hidden;
 78 |   background: #111214;
 79 |   transition: all 0.4s;
 80 | }
 81 | 
 82 | .docs-close-button {
 83 |   opacity: 0;
 84 |   visibility: hidden;
 85 |   position: fixed;
 86 |   top: 28px;
 87 |   right: 32px;
 88 |   color: #f9f9f9;
 89 |   font-family: inherit;
 90 | }
 91 | 
 92 | .docs h2 {
 93 |   padding: 32px 24px;
 94 |   color: #f9f9f9;
 95 | }
 96 | 
 97 | .docs p {
 98 |   margin: 10px 24px 16px;
 99 |   color: #f9f9f9;
100 | }
101 | 
102 | .code-button {
103 |   display: flex;
104 |   align-items: center;
105 |   justify-content: center;
106 |   gap: 8px;
107 |   position: absolute;
108 |   left: 50%;
109 |   bottom: 30px;
110 |   width: 150px;
111 |   padding: 30px 0;
112 |   border-radius: 10px;
113 |   background: #111214;
114 |   transform: translateX(-50%);
115 |   font-size: 16px;
116 |   font-family: inherit;
117 | }
118 | 
119 | @media only screen and (max-width: 600px) {
120 |   .code-button {
121 |     display: none;
122 |   }
123 | }
124 | 
125 | .code-button-text {
126 |   color: #f9f9f9;
127 | }
128 | 
129 | .code-icon {
130 |   flex: 0 0 16px;
131 |   display: block;
132 |   position: relative;
133 |   width: 16px;
134 |   height: 16px;
135 | }
136 | 
137 | .code-icon > span {
138 |   position: absolute;
139 |   display: block;
140 |   width: 2px;
141 |   height: 8px;
142 |   rotate: 45deg;
143 |   top: 3px;
144 |   background: #f9f9f9;
145 | }
146 | 
147 | .code-icon > span,
148 | .code-icon > span::after {
149 |   border-radius: 1px;
150 | }
151 | 
152 | .code-icon > span::after {
153 |   content: "";
154 |   position: absolute;
155 |   top: 3px;
156 |   display: block;
157 |   width: inherit;
158 |   height: inherit;
159 |   background: inherit;
160 | }
161 | 
162 | .code-icon > span:first-child {
163 |   right: 5px;
164 |   left: auto;
165 |   rotate: -45deg;
166 |   transform: translate(2px, 2px);
167 | }
168 | 
169 | .code-icon > span:first-child::after {
170 |   left: -3px;
171 |   rotate: -90deg;
172 | }
173 | 
174 | .code-icon > span:last-child {
175 |   rotate: 45deg;
176 |   right: auto;
177 |   left: 5px;
178 |   transform: translate(-2px, 2px);
179 | }
180 | 
181 | .code-icon > span:last-child::after {
182 |   right: -3px;
183 |   rotate: 90deg;
184 | }
185 | 


--------------------------------------------------------------------------------