`
--------------------------------------------------------------------------------
/README_v1.md:
--------------------------------------------------------------------------------
1 | ## React UseAnimations Icons
2 |
3 | [](https://www.npmjs.com/package/react-useanimations) [](https://www.npmjs.com/package/react-useanimations)
4 |
5 | #### What is react-useanimations?
6 |
7 | React-useanimations is a collection of free animated open source icons for React.js.
8 |
9 | #### Collection
10 |
11 | [https://react.useanimations.com](https://react.useanimations.com/) and play with examples.
12 |
13 | 
14 |
15 | ### Installation
16 |
17 | Using Yarn:
18 |
19 | ```
20 | yarn add react-useanimations
21 | ```
22 |
23 | or using NPM:
24 |
25 | ```
26 | npm install react-useanimations
27 | ```
28 |
29 | ### Usage
30 | This is README for v1, consider upgrading to v2, it will improve your performance - [react-useanimations@v1](https://github.com/useAnimations/react-useanimations/blob/master/README.md)
31 |
32 | Basic Usage
33 | ```javascript
34 | import React from 'react';
35 | import UseAnimations from 'react-useanimations';
36 |
37 | const App = () =>
;
38 |
39 | export default App;
40 | ```
41 |
42 | Icons can be configured with inline props:
43 |
44 | ```javascript
45 |
46 | ```
47 |
--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/useAnimations/react-useanimations/a19d6f1323e1d7dd7c02eb0e3196e9891cc16060/docs/favicon.ico
--------------------------------------------------------------------------------
/docs/iframe.html:
--------------------------------------------------------------------------------
1 |
StorybookNo Preview
Sorry, but you either have no stories or none are selected somehow.
- Please check the Storybook config.
- Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
Storybook
--------------------------------------------------------------------------------
/docs/main.c6002b159b30e5cb1532.bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"main.c6002b159b30e5cb1532.bundle.js","sources":["webpack:///main.c6002b159b30e5cb1532.bundle.js"],"mappings":"AAAA","sourceRoot":""}
--------------------------------------------------------------------------------
/docs/main.e52ee47dedb79d923b43.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{475:function(n,o,p){p(476),p(637),p(1331),n.exports=p(1369)},522:function(n,o){}},[[475,180,181]]]);
--------------------------------------------------------------------------------
/docs/runtime~main.b8c96e2e619cbd80fd45.bundle.js:
--------------------------------------------------------------------------------
1 | !function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];c
40 | *
41 | * Copyright (c) 2014-2017, Jon Schlinkert.
42 | * Released under the MIT License.
43 | */
44 |
45 | /**
46 | * @license
47 | * Lodash
48 | * Copyright OpenJS Foundation and other contributors
49 | * Released under MIT license
50 | * Based on Underscore.js 1.8.3
51 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
52 | */
53 |
54 | /** @license React v0.18.0
55 | * scheduler.production.min.js
56 | *
57 | * Copyright (c) Facebook, Inc. and its affiliates.
58 | *
59 | * This source code is licensed under the MIT license found in the
60 | * LICENSE file in the root directory of this source tree.
61 | */
62 |
63 | /** @license React v16.12.0
64 | * react-dom.production.min.js
65 | *
66 | * Copyright (c) Facebook, Inc. and its affiliates.
67 | *
68 | * This source code is licensed under the MIT license found in the
69 | * LICENSE file in the root directory of this source tree.
70 | */
71 |
72 | /** @license React v16.12.0
73 | * react-is.production.min.js
74 | *
75 | * Copyright (c) Facebook, Inc. and its affiliates.
76 | *
77 | * This source code is licensed under the MIT license found in the
78 | * LICENSE file in the root directory of this source tree.
79 | */
80 |
81 | /** @license React v16.12.0
82 | * react.production.min.js
83 | *
84 | * Copyright (c) Facebook, Inc. and its affiliates.
85 | *
86 | * This source code is licensed under the MIT license found in the
87 | * LICENSE file in the root directory of this source tree.
88 | */
89 |
90 | /**!
91 | * @fileOverview Kickass library to create and place poppers near their reference elements.
92 | * @version 1.16.1
93 | * @license
94 | * Copyright (c) 2016 Federico Zivolo and contributors
95 | *
96 | * Permission is hereby granted, free of charge, to any person obtaining a copy
97 | * of this software and associated documentation files (the "Software"), to deal
98 | * in the Software without restriction, including without limitation the rights
99 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
100 | * copies of the Software, and to permit persons to whom the Software is
101 | * furnished to do so, subject to the following conditions:
102 | *
103 | * The above copyright notice and this permission notice shall be included in all
104 | * copies or substantial portions of the Software.
105 | *
106 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
107 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
108 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
109 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
110 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
111 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
112 | * SOFTWARE.
113 | */
114 |
--------------------------------------------------------------------------------
/docs/vendors~main.c6002b159b30e5cb1532.bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"vendors~main.c6002b159b30e5cb1532.bundle.js","sources":["webpack:///vendors~main.c6002b159b30e5cb1532.bundle.js"],"mappings":";AAAA","sourceRoot":""}
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-useanimations",
3 | "version": "2.10.0",
4 | "description": "Official React component for useanimations icons",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/useAnimations/react-useanimations.git"
8 | },
9 | "author": "Tuan Phung, Marek Feikus",
10 | "license": "MIT",
11 | "bugs": {
12 | "url": "https://github.com/useAnimations/react-useanimations/issues"
13 | },
14 | "homepage": "https://github.com/useAnimations/react-useanimations",
15 | "main": "./index",
16 | "keywords": [
17 | "microanimations",
18 | "small",
19 | "svg",
20 | "icons",
21 | "design",
22 | "useanimations"
23 | ],
24 | "scripts": {
25 | "prebuild": "rimraf dist",
26 | "build": "babel src -d es2015 --ignore '__tests__','**/*.d.ts' --extensions '.ts,.tsx' --out-dir ./dist --copy-files",
27 | "postbuild": "npm run build:types",
28 | "build:watch": "npm run build --watch",
29 | "build:types": "tsc --emitDeclarationOnly",
30 | "lint": "npx eslint --ext .js,.jsx,.ts,.tsx ./src",
31 | "lint:fix": "npx eslint --ext .js,.jsx,.ts,.tsx ./src --fix",
32 | "check-types": "tsc --noEmit",
33 | "check-types:watch": "npm run type-check -- --watch",
34 | "storybook": "start-storybook -p 6006",
35 | "build-storybook": "build-storybook --output-dir docs",
36 | "prepub": "copy package.json dist",
37 | "pub": "npm publish ./dist",
38 | "postpub": "cd dist & del package.json"
39 | },
40 | "dependencies": {
41 | "lottie-web": "^5.5.7"
42 | },
43 | "devDependencies": {
44 | "@babel/cli": "^7.6.2",
45 | "@babel/core": "^7.6.2",
46 | "@babel/plugin-proposal-class-properties": "^7.5.5",
47 | "@babel/preset-env": "^7.9.5",
48 | "@babel/preset-react": "^7.9.4",
49 | "@babel/preset-typescript": "^7.9.0",
50 | "@babel/runtime": "^7.6.2",
51 | "@storybook/addon-actions": "^5.3.19",
52 | "@storybook/addon-info": "^5.3.19",
53 | "@storybook/addon-links": "^5.3.19",
54 | "@storybook/addons": "^5.3.19",
55 | "@storybook/react": "^5.3.19",
56 | "@types/react": "^16.9.34",
57 | "@typescript-eslint/eslint-plugin": "^2.28.0",
58 | "@typescript-eslint/parser": "^2.28.0",
59 | "babel-eslint": "^10.0.3",
60 | "babel-loader": "^8.1.0",
61 | "babel-preset-react-app": "^9.1.2",
62 | "eslint": "^6.5.0",
63 | "eslint-config-airbnb-typescript": "^7.2.1",
64 | "eslint-config-prettier": "^6.11.0",
65 | "eslint-plugin-babel": "^5.3.0",
66 | "eslint-plugin-import": "^2.20.2",
67 | "eslint-plugin-jsx-a11y": "^6.2.3",
68 | "eslint-plugin-prettier": "^3.1.4",
69 | "eslint-plugin-react": "^7.19.0",
70 | "eslint-plugin-react-hooks": "^3.0.0",
71 | "nodemon": "^1.19.1",
72 | "prettier": "^2.0.5",
73 | "rimraf": "^3.0.2",
74 | "storybook": "^5.3.19",
75 | "typescript": "^3.8.3"
76 | },
77 | "peerDependencies": {
78 | "react": ">=16",
79 | "react-dom": ">=16"
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/bin/addAnimationFiles.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -ex
3 |
4 | ### WHEN NEW ANIMATIONS ARE ADDED TO THE /lib,
5 | ### CHANGE YOUR PWD TO /lib (very important step) & RUN THIS SCRIPT TO AUTOMATE THE REST
6 | ### IMPORTANT - MAKE SURE YOU HAVE TRUNCATE PACKAGE BEFORE RUNNING
7 | touch "../temp.ts"
8 | echo "export type AnimationKey = " >> "../temp.ts"
9 |
10 | for file in *; do
11 | if [[ -f "$file" ]]; then
12 | echo "'${file%.*}' |" >> "../temp.ts"
13 | mkdir "${file%.*}"
14 | mv "$file" "${file%.*}"
15 | touch "index.ts"
16 | echo "import type { Animation } from '../../utils/constants';" >> "index.ts"
17 | echo "import ${file%.*} from './$file';" >> "index.ts"
18 | echo "" >> "index.ts"
19 | echo "export default { animationData: ${file%.*}, animationKey: '${file%.*}' } as Animation;" >> "index.ts"
20 | mv "index.ts" "${file%.*}"
21 | fi
22 | done
23 |
24 | ### HACKY - REMOVE LAST CHAR FROM THE TEMP FILE - WHICH IS |
25 | truncate -s -3 "../temp.ts"
26 | echo ";" >> "../temp.ts"
27 | cat "../temp.ts" >> "../utils/constants.ts"
28 | rm "../temp.ts"
--------------------------------------------------------------------------------
/src/bin/generateStories.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -ex
3 |
4 | ### SCRIPT FOR CREATING STORIES WITH ALL ANIMATIONS WHICH ARE INSIDE /LIB FOLDER
5 | ### CALL THE SCRIPT FROM /LIB FOLDER
6 | touch "../generated.stories.tsx"
7 | echo "import React from 'react';" >> "../generated.stories.tsx"
8 |
9 | for dir in *; do
10 | if [[ -d "$dir" ]]; then
11 | echo "import ${dir%.*} from './lib/${dir%.*}';" >> "../generated.stories.tsx"
12 | fi
13 | done
14 |
15 | echo "import UseAnimation from '.';" >> "../generated.stories.tsx"
16 | echo "export default {
17 | title: 'Animations',
18 | component: UseAnimation,
19 | };" >> "../generated.stories.tsx"
20 |
21 | echo "export const All = () => (
22 | " >> "../generated.stories.tsx"
23 |
24 | for dir in *; do
25 | if [[ -d "$dir" ]]; then
26 | echo "
27 | ${dir%.*}
28 |
29 |
" >> "../generated.stories.tsx"
30 | fi
31 | done
32 |
33 | echo "