├── .DS_Store ├── .babelrc ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── components ├── Icon │ ├── checkBoard │ │ └── index.jsx │ ├── doubleCheck │ │ └── index.jsx │ ├── feedback │ │ └── index.jsx │ ├── finance │ │ └── index.jsx │ ├── guideBoarder │ │ └── index.jsx │ ├── icecream │ │ └── index.jsx │ ├── industry │ │ └── index.jsx │ ├── navigator │ │ └── index.jsx │ ├── rain │ │ └── index.jsx │ ├── thermometer │ │ └── index.jsx │ ├── tools │ │ └── index.jsx │ └── wifi │ │ └── index.jsx ├── index.js ├── index.less ├── style │ └── theme.less └── util │ └── debounce.js ├── es └── index.js ├── examples ├── icon.md └── pic.gif ├── gulpfile.js ├── lib └── index.js ├── package.json ├── styleguide.config.js ├── styleguide ├── build │ ├── bundle.72915819.js │ └── bundle.72915819.js.LICENSE.txt └── index.html └── utils ├── apiCollection.js ├── checkDiff.js ├── getBabelCommonConfig.js ├── getNpm.js ├── getProjectPath.js ├── getRunCmdEnv.js ├── postcssConfig.js ├── runCmd.js └── transformLess.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubexchat/react-dynamic-vector-icons/b472255fd40d19d4295c2f218e0b72c87c5bbf7f/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react", 4 | [ 5 | "@babel/env", 6 | { 7 | "targets": { 8 | "edge": "17", 9 | "firefox": "60", 10 | "chrome": "67", 11 | "safari": "11.1" 12 | }, 13 | "useBuiltIns": "usage" 14 | } 15 | ] 16 | ], 17 | "plugins": [ 18 | "@babel/plugin-proposal-class-properties" 19 | ] 20 | } -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "es2020": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended" 10 | ], 11 | "parserOptions": { 12 | "ecmaFeatures": { 13 | "jsx": true 14 | }, 15 | "ecmaVersion": 11, 16 | "sourceType": "module" 17 | }, 18 | "plugins": [ 19 | "react" 20 | ], 21 | "rules": { 22 | "semi": ["warn", "always"], 23 | "quotes": ["warn", "double"] 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | lib/ 107 | es/ 108 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | components/ 2 | examples/ 3 | util/ 4 | styleguide/ 5 | node_modules/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Zhang Wei 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 | # React Dynamic Vector Icons 2 | 3 | Dynamic icons for your React project. 4 | 5 | 6 | 7 | ## Install 8 | 9 | ```bash 10 | npm run install react-dynamic-vector-icons 11 | # or 12 | yarn add react-dynamic-vector-icons 13 | ``` 14 | ## Usage 15 | 16 | ```js 17 | import { CheckBoard,DoubleCheck } from 'react-dynamic-vector-icons'; 18 | 19 | export default () =>( 20 |
21 | 22 | 23 |
24 | ) 25 | ``` 26 | 27 | ## Properties 28 | 29 | Any Text property and the following: 30 | 31 | | Name | type | Description | Default | 32 | | :--- | :----- | :--------------- | :------ | 33 | | size | String | Size of the icon | `"80"` | 34 | 35 | ## Icon categories 36 | 37 | * CheckBoard 38 | * DoubleCheck 39 | * Finance 40 | * Feedback 41 | * GuideBoarder 42 | * Icecream 43 | * Industry 44 | * Navigator 45 | * Rain 46 | * Thermometer 47 | * Tools 48 | * Wifi 49 | 50 | ## Support Some SSR Frames 51 | 52 | Maybe you could use some SSR React Frames,such as `next.js`,you can import it as follows: 53 | 54 | ```js 55 | const GuideBoarder = dynamic(() => import("react-dynamic-vector-icons").then((mod) => mod.GuideBoarder), { ssr: false }); 56 | ``` 57 | ## License 58 | 59 | This project is licenced under the MIT License. 60 | -------------------------------------------------------------------------------- /components/Icon/checkBoard/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 3 | import debounce from '../../util/debounce'; 4 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 5 | import { CSSPlugin } from 'gsap/CSSPlugin' 6 | 7 | class Icon extends PureComponent { 8 | constructor(props) { 9 | super(props); 10 | this.timer = null 11 | }; 12 | 13 | static defaultProps = { 14 | size: "80", 15 | }; 16 | 17 | componentDidMount() { 18 | gsap.registerPlugin(CSSPlugin) 19 | gsap.registerPlugin(MotionPathPlugin); 20 | let { type } = this.props; 21 | if (type === "loopPlay") { 22 | debounce(this.startAnimation, 2500)() 23 | let timer = setInterval(() => { 24 | debounce(this.startAnimation, 2500)() 25 | }, 2500) 26 | } else { 27 | return; 28 | } 29 | }; 30 | 31 | componentWillUnmount() { 32 | this.timer = null 33 | }; 34 | 35 | 36 | startAnimation = () => { 37 | var tl = new TimelineMax(); 38 | tl.from('#ice-board', 0.6, { y: -800, transformOrigin: "center", ease: Power2.easeOut }) 39 | .from('#ice-board-bc', 0.2, { opacity: 0, transformOrigin: "center", ease: Power2.easeOut }) 40 | .from('#ice-board-check', 0.2, { opacity: 0, transformOrigin: "center", ease: Power2.easeOut }) 41 | } 42 | 43 | render() { 44 | let { size } = this.props; 45 | return ( 46 | 50 | 51 | 52 | 53 | 54 | 56 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | ) 70 | } 71 | } 72 | 73 | export default Icon; -------------------------------------------------------------------------------- /components/Icon/doubleCheck/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import classNames from 'classnames'; 3 | import { gsap, TimelineMax, Power2, Bounce } from "gsap"; 4 | import debounce from '../../util/debounce'; 5 | import { CSSPlugin } from 'gsap/CSSPlugin' 6 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 7 | 8 | class Icon extends PureComponent { 9 | constructor(props) { 10 | super(props); 11 | this.timer = null 12 | }; 13 | 14 | static defaultProps = { 15 | size: "80", 16 | }; 17 | 18 | startAnimation = () => { 19 | var tl = new TimelineMax(); 20 | tl.from('#double-check-once', 0.5, { y: 300, transformOrigin: "top", ease: Bounce.easeOut }) 21 | .from('#double-check-twice', 0.5, { y: 300, transformOrigin: "top", ease: Bounce.easeOut }) 22 | }; 23 | 24 | componentDidMount() { 25 | gsap.registerPlugin(CSSPlugin) 26 | gsap.registerPlugin(MotionPathPlugin); 27 | let { type } = this.props; 28 | if (type === "loopPlay") { 29 | debounce(this.startAnimation, 3000)() 30 | let timer = setInterval(() => { 31 | debounce(this.startAnimation, 3000)() 32 | }, 3000) 33 | } else { 34 | return; 35 | } 36 | }; 37 | 38 | componentWillUnmount() { 39 | this.timer = null 40 | }; 41 | 42 | render() { 43 | let { size } = this.props; 44 | return ( 45 | 49 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | ) 66 | } 67 | } 68 | 69 | export default Icon; -------------------------------------------------------------------------------- /components/Icon/feedback/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 3 | import debounce from '../../util/debounce'; 4 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 5 | import { CSSPlugin } from 'gsap/CSSPlugin' 6 | 7 | class Icon extends PureComponent { 8 | constructor(props) { 9 | super(props); 10 | this.timer = null 11 | }; 12 | 13 | static defaultProps = { 14 | size: "80", 15 | }; 16 | 17 | componentDidMount() { 18 | gsap.registerPlugin(CSSPlugin) 19 | gsap.registerPlugin(MotionPathPlugin); 20 | 21 | }; 22 | 23 | componentWillUnmount() { 24 | this.timer = null 25 | }; 26 | 27 | startAnimation = () => { 28 | var tl = new TimelineMax(); 29 | tl.from('#feedback-say', 1, { x: -800, transformOrigin: "center" }) 30 | .from('#feedback-points', 0.2, { opacity: 0, transformOrigin: "center" }) 31 | .to('#feedback-points', 0.2, { opacity: 1, transformOrigin: "center" }) 32 | .from('#feedback-points', 0.2, { opacity: 0, transformOrigin: "center" }) 33 | .to('#feedback-points', 0.2, { opacity: 1, transformOrigin: "center" }) 34 | .from('#feedback-heart', 1, { y: 800, transformOrigin: "center", ease: Power2.easeOut }) 35 | }; 36 | 37 | 38 | render() { 39 | let { size } = this.props; 40 | return ( 41 | 45 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | ) 68 | } 69 | } 70 | 71 | export default Icon; -------------------------------------------------------------------------------- /components/Icon/finance/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import classNames from 'classnames'; 3 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 4 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin'; 5 | import { CSSPlugin } from 'gsap/CSSPlugin'; 6 | import debounce from '../../util/debounce'; 7 | 8 | class Icon extends PureComponent { 9 | constructor(props) { 10 | super(props); 11 | this.timer = null 12 | }; 13 | 14 | static defaultProps = { 15 | size: "80", 16 | }; 17 | 18 | componentDidMount() { 19 | gsap.registerPlugin(CSSPlugin) 20 | gsap.registerPlugin(MotionPathPlugin); 21 | 22 | }; 23 | 24 | componentWillUnmount() { 25 | this.timer = null 26 | }; 27 | 28 | startAnimation = () => { 29 | var tl = new TimelineMax(); 30 | tl.from('#finance-bottom-line', 0.5, { scaleY: 0, transformOrigin: "center", ease: Bounce.easeOut }) 31 | .from('#finance-red', 0.3, { scaleX: 0, transformOrigin: "bottom", ease: Bounce.easeOut }) 32 | .from('#finance-orange', 0.3, { scaleY: 0, transformOrigin: "bottom", ease: Bounce.easeOut }) 33 | .from('#finance-blue', 0.3, { scaleX: 0, transformOrigin: "bottom", ease: Bounce.easeOut }) 34 | .from('#finance-up-line', 0.4, { scale: 0, transformOrigin: "left", ease: Bounce.easeOut }) 35 | }; 36 | 37 | render() { 38 | let { size } = this.props; 39 | return ( 40 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | ) 76 | } 77 | } 78 | 79 | export default Icon; -------------------------------------------------------------------------------- /components/Icon/guideBoarder/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import classNames from 'classnames'; 3 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 4 | import debounce from '../../util/debounce'; 5 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 6 | import { CSSPlugin } from 'gsap/CSSPlugin' 7 | 8 | class GuideBoarder extends PureComponent { 9 | constructor(props) { 10 | super(props); 11 | this.timer = null 12 | }; 13 | 14 | static defaultProps = { 15 | size: "80", 16 | }; 17 | 18 | componentDidMount() { 19 | gsap.registerPlugin(CSSPlugin) 20 | gsap.registerPlugin(MotionPathPlugin); 21 | 22 | }; 23 | 24 | componentWillUnmount() { 25 | this.timer = null 26 | }; 27 | 28 | startAnimation = () => { 29 | var tl = new TimelineMax(); 30 | tl.from('#bottomLeft', 0.5, { scaleY: 0, transformOrigin: "bottom", ease: Power2.easeOut }) 31 | .from('#bottomRight', 0.2, { scaleX: 0, transformOrigin: "top", ease: Power2.easeOut }) 32 | .from('#woodBc', 0.5, { scaleY: 0, transformOrigin: "center", ease: Bounce.easeOut }) 33 | .from('#wood', 0.3, { scaleX: 0, transformOrigin: "center", ease: Bounce.easeOut }) 34 | .from('#leftBc', 0.5, { scale: 0, transformOrigin: "center", ease: Bounce.easeOut }) 35 | .from('#left', 0.2, { scaleX: 0, transformOrigin: "center", ease: Circ.easeOut }) 36 | .from('#rightBc', 0.5, { scale: 0, transformOrigin: "center", ease: Bounce.easeOut }) 37 | .from('#right', 0.2, { scaleX: 0, transformOrigin: "center", ease: Power2.easeOut }) 38 | }; 39 | 40 | render() { 41 | let { size } = this.props; 42 | return ( 43 | 47 | 49 | 50 | 51 | 52 | 54 | 55 | 57 | 58 | 60 | 61 | 62 | 63 | 64 | 65 | ) 66 | } 67 | } 68 | 69 | export default GuideBoarder; -------------------------------------------------------------------------------- /components/Icon/icecream/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import classNames from 'classnames'; 3 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 4 | import debounce from '../../util/debounce'; 5 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin'; 6 | import { CSSPlugin } from 'gsap/CSSPlugin'; 7 | 8 | class Icecream extends PureComponent { 9 | constructor(props) { 10 | super(props); 11 | this.timer = null 12 | }; 13 | 14 | static defaultProps = { 15 | size: "80", 16 | }; 17 | 18 | componentDidMount() { 19 | gsap.registerPlugin(CSSPlugin) 20 | gsap.registerPlugin(MotionPathPlugin); 21 | 22 | }; 23 | 24 | componentWillUnmount() { 25 | this.timer = null 26 | }; 27 | 28 | startAnimation = () => { 29 | var tl = new TimelineMax(); 30 | tl.from('#ice-cream-cover', 0.5, { scaleX: 0, transformOrigin: "center", ease: Power2.easeOut }) 31 | .from('#ice-cream-green', 0.5, { scaleY: 0, transformOrigin: "bottom", ease: Bounce.easeOut }) 32 | .from('#ice-cream-red', 0.5, { scaleX: 0, transformOrigin: "top", ease: Bounce.easeOut }) 33 | .from('#ice-cream-blue', 0.5, { scaleY: 0, transformOrigin: "bottom", ease: Bounce.easeOut }) 34 | .from('#ice-cream-prex', 2, { scaleY: 0, transformOrigin: "top", ease: Power2.easeOut }) 35 | }; 36 | 37 | render() { 38 | let { size } = this.props; 39 | return ( 40 | 44 | 45 | 46 | 47 | 48 | 49 | 51 | 52 | 53 | 54 | 56 | 57 | 59 | 60 | 61 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | ) 100 | } 101 | } 102 | 103 | export default Icecream; -------------------------------------------------------------------------------- /components/Icon/industry/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 3 | import debounce from '../../util/debounce'; 4 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 5 | import { CSSPlugin } from 'gsap/CSSPlugin'; 6 | 7 | class Icon extends PureComponent { 8 | constructor(props) { 9 | super(props); 10 | this.timer = null 11 | }; 12 | 13 | static defaultProps = { 14 | size: "80", 15 | }; 16 | 17 | componentDidMount() { 18 | gsap.registerPlugin(CSSPlugin) 19 | gsap.registerPlugin(MotionPathPlugin); 20 | 21 | }; 22 | 23 | componentWillUnmount() { 24 | this.timer = null 25 | }; 26 | 27 | startAnimation = () => { 28 | var tl = new TimelineMax(); 29 | tl.to('#industry-balancer', 1, { rotation: 20, transformOrigin: "center" }) 30 | .to('#industry-balancer', 1, { rotation: 0, transformOrigin: "center" }) 31 | .to('#industry-balancer', 1, { rotation: 20, transformOrigin: "center" }) 32 | .to('#industry-balancer', 1, { rotation: 0, transformOrigin: "center" }) 33 | 34 | tl.to("#industry-right", 1, { y: 80, transformOrigin: "top" }, 0) 35 | .to("#industry-right", 1, { y: 0, transformOrigin: "top" }, 1) 36 | .to("#industry-right", 1, { y: 80, transformOrigin: "top" }, 2) 37 | .to("#industry-right", 1, { y: 0, transformOrigin: "top" }, 3) 38 | tl.to("#industry-left", 1, { y: -30, transformOrigin: "top" }, 0) 39 | .to("#industry-left", 1, { y: 0, transformOrigin: "top" }, 1) 40 | .to("#industry-left", 1, { y: -30, transformOrigin: "top" }, 2) 41 | .to("#industry-left", 1, { y: 0, transformOrigin: "top" }, 3) 42 | }; 43 | 44 | render() { 45 | let { size } = this.props; 46 | return ( 47 | 51 | 52 | 53 | 54 | 56 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 70 | 72 | 74 | 75 | 76 | 77 | 78 | 79 | ) 80 | } 81 | } 82 | 83 | export default Icon; -------------------------------------------------------------------------------- /components/Icon/navigator/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import classNames from 'classnames'; 3 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 4 | import debounce from '../../util/debounce'; 5 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 6 | import { CSSPlugin } from 'gsap/CSSPlugin'; 7 | 8 | class Navigator extends PureComponent { 9 | constructor(props) { 10 | super(props); 11 | this.timer = null 12 | }; 13 | 14 | static defaultProps = { 15 | size: "80", 16 | }; 17 | 18 | componentDidMount() { 19 | gsap.registerPlugin(CSSPlugin) 20 | gsap.registerPlugin(MotionPathPlugin); 21 | 22 | }; 23 | 24 | componentWillUnmount() { 25 | this.timer = null 26 | }; 27 | 28 | startAnimation = () => { 29 | var tl = new TimelineMax(); 30 | tl.to("#compress-pointer", 0.5, { rotation: 720, transformOrigin: "center" }) 31 | .to("#compress-pointer", 0.5, { rotation: -20, transformOrigin: "center" }) 32 | .to("#compress-pointer", 1, { rotation: 20, transformOrigin: "center" }) 33 | .to("#compress-pointer", 1, { rotation: 0, transformOrigin: "center" }) 34 | }; 35 | 36 | render() { 37 | let { size } = this.props; 38 | return ( 39 | 43 | 45 | 46 | 47 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | ) 74 | } 75 | } 76 | 77 | export default Navigator; -------------------------------------------------------------------------------- /components/Icon/rain/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 3 | import debounce from '../../util/debounce'; 4 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 5 | import { CSSPlugin } from 'gsap/CSSPlugin'; 6 | 7 | class Rain extends PureComponent { 8 | constructor(props) { 9 | super(props); 10 | this.timer = null 11 | }; 12 | 13 | static defaultProps = { 14 | size: "80", 15 | }; 16 | 17 | componentDidMount() { 18 | gsap.registerPlugin(CSSPlugin) 19 | gsap.registerPlugin(MotionPathPlugin); 20 | let { type } = this.props; 21 | if (type === "loopPlay") { 22 | debounce(this.startAnimation, 1500)() 23 | let timer = setInterval(() => { 24 | debounce(this.startAnimation, 1500)() 25 | }, 1500) 26 | } else { 27 | return; 28 | } 29 | }; 30 | 31 | componentWillUnmount() { 32 | this.timer = null 33 | }; 34 | 35 | startAnimation = () => { 36 | var tl = new TimelineMax(); 37 | tl.from('#rain', 1, { y: -600, transformOrigin: "top", ease: Power2.easeOut }) 38 | }; 39 | 40 | render() { 41 | let { size } = this.props; 42 | return ( 43 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | ) 63 | } 64 | } 65 | 66 | export default Rain; -------------------------------------------------------------------------------- /components/Icon/thermometer/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import classNames from 'classnames'; 3 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 4 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 5 | import { CSSPlugin } from 'gsap/CSSPlugin'; 6 | import debounce from '../../util/debounce'; 7 | 8 | class Thermometer extends PureComponent { 9 | constructor(props) { 10 | super(props); 11 | this.timer = null 12 | }; 13 | 14 | static defaultProps = { 15 | size: "80", 16 | }; 17 | 18 | componentDidMount() { 19 | gsap.registerPlugin(CSSPlugin) 20 | gsap.registerPlugin(MotionPathPlugin); 21 | 22 | }; 23 | 24 | componentWillUnmount() { 25 | this.timer = null 26 | }; 27 | 28 | startAnimation = () => { 29 | var tl = new TimelineMax(); 30 | tl.from('#tem-left', 0.5, { scaleX: 0, transformOrigin: "bottom", ease: Bounce.easeOut }) 31 | .from('#tem-right', 0.2, { scaleX: 0, transformOrigin: "top", ease: Power2.easeOut }) 32 | .from('#tem-silk-1', 1.5, { scaleY: 0, transformOrigin: "bottom", ease: Power2.easeOut }) 33 | .from('#tem-silk-2', 0.3, { scaleX: 0, transformOrigin: "center", ease: Bounce.easeOut }) 34 | .from('#tem-note', 0.2, { scale: 0, transformOrigin: "center", ease: Bounce.easeOut }) 35 | .from('#tem-sun', 0.2, { scaleX: 0, transformOrigin: "center", ease: Circ.easeOut }) 36 | }; 37 | 38 | render() { 39 | let { size } = this.props; 40 | return ( 41 | 45 | 47 | 48 | 50 | 52 | 54 | 56 | 57 | 58 | 59 | 60 | 61 | 63 | 65 | 67 | 69 | 70 | 71 | 72 | ) 73 | } 74 | } 75 | 76 | export default Thermometer; -------------------------------------------------------------------------------- /components/Icon/tools/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { gsap, TimelineMax } from "gsap"; 3 | import debounce from '../../util/debounce'; 4 | import { CSSPlugin } from 'gsap/CSSPlugin'; 5 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin' 6 | 7 | class Tools extends PureComponent { 8 | constructor(props) { 9 | super(props); 10 | this.timer = null 11 | }; 12 | 13 | static defaultProps = { 14 | size: "80", 15 | }; 16 | 17 | componentDidMount() { 18 | gsap.registerPlugin(CSSPlugin) 19 | gsap.registerPlugin(MotionPathPlugin); 20 | let { type } = this.props; 21 | if (type === "loopPlay") { 22 | debounce(this.startAnimation, 1500)() 23 | let timer = setInterval(() => { 24 | debounce(this.startAnimation, 1500)() 25 | }, 1500) 26 | } else { 27 | return; 28 | } 29 | }; 30 | 31 | componentWillUnmount() { 32 | this.timer = null 33 | }; 34 | 35 | startAnimation = () => { 36 | var tl = new TimelineMax(); 37 | tl.to('#tool', 0.2, { rotation: 30, transformOrigin: "center" }) 38 | .to('#tool', 0.2, { rotation: 0, transformOrigin: "center" }) 39 | 40 | }; 41 | 42 | render() { 43 | let { size } = this.props; 44 | return ( 45 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | ) 67 | } 68 | } 69 | 70 | export default Tools; -------------------------------------------------------------------------------- /components/Icon/wifi/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { gsap, TimelineMax, Power2, Bounce, Circ } from "gsap"; 3 | import { CSSPlugin } from 'gsap/CSSPlugin'; 4 | import { MotionPathPlugin } from 'gsap/MotionPathPlugin'; 5 | import debounce from '../../util/debounce'; 6 | 7 | class Wifi extends PureComponent { 8 | constructor(props) { 9 | super(props); 10 | this.timer = null; 11 | }; 12 | 13 | static defaultProps = { 14 | size: "80", 15 | }; 16 | 17 | componentDidMount() { 18 | gsap.registerPlugin(CSSPlugin) 19 | gsap.registerPlugin(MotionPathPlugin); 20 | // let { type } = this.props; 21 | // if (type === "loopPlay") { 22 | // debounce(this.startAnimation, 4000)() 23 | // let timer = setInterval(() => { 24 | // debounce(this.startAnimation, 4000)() 25 | // }, 4000) 26 | // } else { 27 | // return; 28 | // } 29 | }; 30 | 31 | componentWillUnmount() { 32 | let timer = null; 33 | } 34 | 35 | startAnimation = () => { 36 | var tl = new TimelineMax(); 37 | tl.from('#wifi-three', 0.2, { opacity: 0.2, transformOrigin: "center" }) 38 | .from('#wifi-two', 0.2, { opacity: 0.2, transformOrigin: "center" }) 39 | .from('#wifi-one', 0.2, { opacity: 0.2, transformOrigin: "center" }) 40 | .to('#wifi-one', 1, { opacity: 0.2, transformOrigin: "center" }) 41 | .to('#wifi-one', 1, { opacity: 1, transformOrigin: "center" }) 42 | .from('#wifi-star', 0.5, { opacity: 0, transformOrigin: "center" }) 43 | }; 44 | 45 | render() { 46 | let { size } = this.props; 47 | return ( 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 61 | 62 | 63 | 64 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | ) 76 | } 77 | } 78 | 79 | export default Wifi; -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | export { default as CheckBoard } from "./Icon/checkBoard"; 2 | export { default as DoubleCheck } from "./Icon/doubleCheck"; 3 | export { default as Finance } from "./Icon/finance"; 4 | export { default as Feedback } from "./Icon/feedback"; 5 | export { default as GuideBoarder } from "./Icon/guideBoarder"; 6 | export { default as Icecream } from "./Icon/icecream"; 7 | export { default as Industry } from "./Icon/industry"; 8 | export { default as Navigator } from "./Icon/navigator"; 9 | export { default as Rain } from "./Icon/rain"; 10 | export { default as Thermometer } from "./Icon/thermometer"; 11 | export { default as Tools } from "./Icon/tools"; 12 | export { default as Wifi } from "./Icon/wifi"; -------------------------------------------------------------------------------- /components/index.less: -------------------------------------------------------------------------------- 1 | .icecream { 2 | color: #fff; 3 | } -------------------------------------------------------------------------------- /components/style/theme.less: -------------------------------------------------------------------------------- 1 | @rc-prefix: ice; -------------------------------------------------------------------------------- /components/util/debounce.js: -------------------------------------------------------------------------------- 1 | 2 | export default function debounce(fn, interval) { 3 | let isRunning = false; 4 | return function () { 5 | if (isRunning) { 6 | return; 7 | } else { 8 | isRunning = true; 9 | fn.apply(this, arguments) 10 | setTimeout(() => { 11 | isRunning = false; 12 | }, interval) 13 | } 14 | } 15 | } 16 | 17 | 18 | -------------------------------------------------------------------------------- /es/index.js: -------------------------------------------------------------------------------- 1 | export { default as CheckBoard } from "./Icon/checkBoard"; 2 | export { default as DoubleCheck } from "./Icon/doubleCheck"; 3 | export { default as Finance } from "./Icon/finance"; 4 | export { default as Feedback } from "./Icon/feedback"; 5 | export { default as GuideBoarder } from "./Icon/guideBoarder"; 6 | export { default as Icecream } from "./Icon/icecream"; 7 | export { default as Industry } from "./Icon/industry"; 8 | export { default as Navigator } from "./Icon/navigator"; 9 | export { default as Rain } from "./Icon/rain"; 10 | export { default as Thermometer } from "./Icon/thermometer"; 11 | export { default as Tools } from "./Icon/tools"; 12 | export { default as Wifi } from "./Icon/wifi"; -------------------------------------------------------------------------------- /examples/icon.md: -------------------------------------------------------------------------------- 1 | Icon 2 | 3 | ```js 4 | import { CheckBoard,DoubleCheck,Finance,Feedback,GuideBoarder, 5 | Icecream,Industry,Navigator,Rain,Thermometer,Tools,Wifi } from '../components'; 6 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | ``` -------------------------------------------------------------------------------- /examples/pic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tubexchat/react-dynamic-vector-icons/b472255fd40d19d4295c2f218e0b72c87c5bbf7f/examples/pic.gif -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const { series, parallel } = require("gulp"); 3 | const { execSync } = require('child_process'); 4 | var shell = require('shelljs'); 5 | 6 | const gulp = require("gulp"); 7 | const argv = require('minimist')(process.argv.slice(2)); 8 | const babel = require("gulp-babel"); 9 | const rimraf = require("rimraf"); 10 | const webpack = require("webpack"); 11 | const through2 = require('through2'); 12 | const merge2 = require("merge2"); 13 | const transformLess = require('./utils/transformLess'); 14 | const getBabelCommonConfig = require("./utils/getBabelCommonConfig"); 15 | const cwd = process.cwd(); 16 | const libDir = path.join.apply(path, [cwd, "lib/"]); 17 | const esDir = path.join.apply(path, [cwd, "es/"]); 18 | const getProjectPath = require("./utils/getProjectPath"); 19 | const packageJson = require(getProjectPath('package.json')); 20 | const runCmd = require("./utils/runCmd"); 21 | const checkDiff = require("./utils/checkDiff"); 22 | // 在Babel中默认为modules，只有明确设置为false才会关闭 23 | function compile(modules) { 24 | rimraf.sync(modules === false ? esDir : libDir); 25 | // 移动less文件并转译less文件成css文件 26 | const less = gulp.src(['components/**/*.less', 'components/*.less', 'components/**/**/*.less']).pipe( 27 | through2.obj(function (file, encoding, next) { 28 | this.push(file.clone()); 29 | transformLess(file.path) 30 | .then(css => { 31 | file.contents = Buffer.from(css); 32 | // convert less files into css files 33 | file.path = file.path.replace(/\.less$/, '.css'); 34 | this.push(file); 35 | next(); 36 | }).catch(err => { 37 | console.error(err); 38 | }) 39 | }) 40 | ).pipe(gulp.dest(modules === false ? esDir : libDir)); 41 | // clone svg files into target diractories 42 | const svg = gulp.src(['components/**/*.svg']).pipe( 43 | through2.obj(function (file, encoding, next) { 44 | this.push(file.clone()) 45 | }) 46 | ).pipe(gulp.dest(modules === false ? esDir : libDir)); 47 | 48 | const resource = ['components/**/*.jsx', 'components/*.js', 'components/**/*.js']; 49 | let jscode = gulp.src(resource); 50 | // compile Javascript files 51 | let jsStream = babelify(jscode, modules); 52 | return merge2([less, jsStream, svg]); 53 | }; 54 | 55 | function babelify(js, modules) { 56 | const babelConfig = getBabelCommonConfig(modules); 57 | let stream = js.pipe(babel(babelConfig)).pipe( 58 | through2.obj(function (file, encoding, next) { 59 | this.push(file.clone()); 60 | const content = file.contents.toString(encoding); 61 | let newContent = content.replace(/\.less/g, '.css') 62 | file.contents = Buffer.from(newContent); 63 | this.push(file) 64 | next(); 65 | }) 66 | ); 67 | return stream.pipe(gulp.dest(modules === false ? esDir : libDir)) 68 | } 69 | 70 | gulp.task("compile-es", done => { 71 | console.log("生成es文件夹..."); 72 | compile(false); 73 | done() 74 | }); 75 | 76 | gulp.task("compile-lib", done => { 77 | console.log("生成lib文件夹..."); 78 | compile() 79 | done() 80 | }); 81 | 82 | /** 83 | * 发布NPM新版本 84 | * npm run pub --npm-tag=0.2.1 85 | * */ 86 | gulp.task("pub", done => { 87 | // 匹配当前版本号 88 | let { version } = packageJson; 89 | const versionFine = version.match(/^\d+\.\d+\.\d+$/); 90 | let tagString; 91 | if (argv['npm-tag']) { 92 | tagString = argv['npm-tag']; 93 | } 94 | if (!tagString && versionFine) { 95 | let args = ['publish'].concat(['--tag', tagString]) 96 | shell.exec(`npm publish --tag=${tagString}`); 97 | shell.exec(`git tag ${version}`); 98 | shell.exec('git push origin master:master'); 99 | done(); 100 | } else { 101 | shell.exec(`npm publish`); 102 | shell.exec(`git tag ${version}`); 103 | shell.exec('git push origin master:master'); 104 | done(); 105 | } 106 | }) 107 | 108 | gulp.task("compile", series(parallel("compile-es", "compile-lib"))); 109 | gulp.task("diff", series(done => { 110 | let { name, version } = packageJson; 111 | checkDiff(name, version, done) 112 | })); 113 | 114 | exports.compile = gulp.task("compile"); 115 | exports.pub = gulp.task("pub"); 116 | exports.diff = gulp.task("diff"); 117 | exports.default = (done) => { 118 | console.log("请指定gulp任务"); 119 | done(); 120 | }; -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | Object.defineProperty(exports, "CheckBoard", { 7 | enumerable: true, 8 | get: function get() { 9 | return _checkBoard["default"]; 10 | } 11 | }); 12 | Object.defineProperty(exports, "DoubleCheck", { 13 | enumerable: true, 14 | get: function get() { 15 | return _doubleCheck["default"]; 16 | } 17 | }); 18 | Object.defineProperty(exports, "Finance", { 19 | enumerable: true, 20 | get: function get() { 21 | return _finance["default"]; 22 | } 23 | }); 24 | Object.defineProperty(exports, "Feedback", { 25 | enumerable: true, 26 | get: function get() { 27 | return _feedback["default"]; 28 | } 29 | }); 30 | Object.defineProperty(exports, "GuideBoarder", { 31 | enumerable: true, 32 | get: function get() { 33 | return _guideBoarder["default"]; 34 | } 35 | }); 36 | Object.defineProperty(exports, "Icecream", { 37 | enumerable: true, 38 | get: function get() { 39 | return _icecream["default"]; 40 | } 41 | }); 42 | Object.defineProperty(exports, "Industry", { 43 | enumerable: true, 44 | get: function get() { 45 | return _industry["default"]; 46 | } 47 | }); 48 | Object.defineProperty(exports, "Navigator", { 49 | enumerable: true, 50 | get: function get() { 51 | return _navigator["default"]; 52 | } 53 | }); 54 | Object.defineProperty(exports, "Rain", { 55 | enumerable: true, 56 | get: function get() { 57 | return _rain["default"]; 58 | } 59 | }); 60 | Object.defineProperty(exports, "Thermometer", { 61 | enumerable: true, 62 | get: function get() { 63 | return _thermometer["default"]; 64 | } 65 | }); 66 | Object.defineProperty(exports, "Tools", { 67 | enumerable: true, 68 | get: function get() { 69 | return _tools["default"]; 70 | } 71 | }); 72 | Object.defineProperty(exports, "Wifi", { 73 | enumerable: true, 74 | get: function get() { 75 | return _wifi["default"]; 76 | } 77 | }); 78 | 79 | var _checkBoard = _interopRequireDefault(require("./Icon/checkBoard")); 80 | 81 | var _doubleCheck = _interopRequireDefault(require("./Icon/doubleCheck")); 82 | 83 | var _finance = _interopRequireDefault(require("./Icon/finance")); 84 | 85 | var _feedback = _interopRequireDefault(require("./Icon/feedback")); 86 | 87 | var _guideBoarder = _interopRequireDefault(require("./Icon/guideBoarder")); 88 | 89 | var _icecream = _interopRequireDefault(require("./Icon/icecream")); 90 | 91 | var _industry = _interopRequireDefault(require("./Icon/industry")); 92 | 93 | var _navigator = _interopRequireDefault(require("./Icon/navigator")); 94 | 95 | var _rain = _interopRequireDefault(require("./Icon/rain")); 96 | 97 | var _thermometer = _interopRequireDefault(require("./Icon/thermometer")); 98 | 99 | var _tools = _interopRequireDefault(require("./Icon/tools")); 100 | 101 | var _wifi = _interopRequireDefault(require("./Icon/wifi")); 102 | 103 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-dynamic-vector-icons", 3 | "version": "0.0.7", 4 | "license": "MIT", 5 | "keywords": [ 6 | "icons", 7 | "react icons", 8 | "dynamic icons", 9 | "vector icons" 10 | ], 11 | "homepage": "https://github.com/ZhangWei-KUMO/react-dynamic-vector-icons", 12 | "bugs": { 13 | "url": "https://github.com/ZhangWei-KUMO/react-dynamic-vector-icons/issues" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/ZhangWei-KUMO/react-dynamic-vector-icons" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.8.7", 21 | "@babel/plugin-proposal-decorators": "^7.8.3", 22 | "@babel/plugin-proposal-export-default-from": "^7.8.3", 23 | "@babel/plugin-proposal-export-namespace-from": "^7.8.3", 24 | "@babel/plugin-proposal-object-rest-spread": "^7.8.3", 25 | "@babel/plugin-transform-member-expression-literals": "^7.8.3", 26 | "@babel/plugin-transform-object-assign": "^7.8.3", 27 | "@babel/plugin-transform-property-literals": "^7.8.3", 28 | "@babel/plugin-transform-runtime": "^7.8.3", 29 | "@babel/plugin-transform-spread": "^7.8.3", 30 | "@babel/plugin-transform-template-literals": "^7.8.3", 31 | "@babel/preset-env": "^7.8.7", 32 | "@babel/preset-react": "^7.8.3", 33 | "autoprefixer": "^9.7.4", 34 | "babel-loader": "^8.0.6", 35 | "babel-plugin-inline-import-data-uri": "^1.0.1", 36 | "chalk": "^3.0.0", 37 | "css-loader": "^3.4.2", 38 | "eslint": "^7.3.1", 39 | "eslint-plugin-react": "^7.20.0", 40 | "file-loader": "^6.0.0", 41 | "glob": "^7.1.6", 42 | "gulp": "^4.0.2", 43 | "gulp-babel": "^8.0.0", 44 | "is-windows": "^1.0.2", 45 | "less-loader": "^5.0.0", 46 | "less-plugin-npm-import": "^2.1.0", 47 | "merge2": "^1.3.0", 48 | "minimist": "^1.2.5", 49 | "node-fetch": "^2.6.0", 50 | "postcss": "^7.0.27", 51 | "react-styleguidist": "^11.0.8", 52 | "readline": "^1.3.0", 53 | "rimraf": "^3.0.2", 54 | "rucksack-css": "^1.0.2", 55 | "shelljs": "^0.8.3", 56 | "style-loader": "^1.1.3", 57 | "svg-inline-loader": "^0.8.2", 58 | "svg-react-loader": "^0.4.6", 59 | "through2": "^3.0.1", 60 | "webpack": "^4.42.0" 61 | }, 62 | "main": "lib/index.js", 63 | "module": "es/index.js", 64 | "scripts": { 65 | "start": "npx styleguidist server", 66 | "build": " npx styleguidist build", 67 | "compile": "gulp compile", 68 | "pub": "gulp pub" 69 | }, 70 | "dependencies": { 71 | "@babel/plugin-proposal-class-properties": "^7.8.3", 72 | "classnames": "^2.2.6", 73 | "gsap": "^3.2.4", 74 | "less": "^3.11.1", 75 | "prop-types": "^15.7.2", 76 | "react": "^16.13.0", 77 | "react-dom": "^16.13.0" 78 | }, 79 | "browserslist": [ 80 | ">1%", 81 | "last 1 version", 82 | "Firefox ESR", 83 | "not dead" 84 | ] 85 | } -------------------------------------------------------------------------------- /styleguide.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | webpackConfig: { 3 | module: { 4 | rules: [ 5 | { 6 | test: /\.jsx$/, 7 | exclude: /node_modules/, 8 | use: ['babel-loader'] 9 | }, 10 | { 11 | test: /\.less$/, 12 | exclude: /node_modules/, 13 | use: ['style-loader', 'css-loader', 'less-loader'] 14 | }, 15 | { 16 | test: /\.svg$/, 17 | exclude: /node_modules/, 18 | loader: 'svg-react-loader' 19 | }, 20 | { 21 | test: /\.(png|jpe?g|gif)$/i, 22 | exclude: /node_modules/, 23 | use: ['file-loader'] 24 | }, 25 | ] 26 | } 27 | }, 28 | sections: [ 29 | { 30 | name: 'Icon', 31 | content: 'examples/icon.md', 32 | components: '/components/Icon/*.jsx' 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /styleguide/build/bundle.72915819.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * @overview es6-promise - a tiny implementation of Promises/A+. 9 | * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald) 10 | * @license Licensed under MIT license 11 | * See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE 12 | * @version v4.2.8+1e68dce6 13 | */ 14 | 15 | /*! 16 | * The buffer module from node.js, for the browser. 17 | * 18 | * @author Feross Aboukhadijeh 19 | * @license MIT 20 | */ 21 | 22 | /*! 23 | * regjsgen 0.5.1 24 | * Copyright 2014-2019 Benjamin Tan 25 | * Available under MIT license 26 | */ 27 | 28 | /*! https://mths.be/regenerate v1.3.3 by @mathias | MIT license */ 29 | 30 | /** 31 | * A better abstraction over CSS. 32 | * 33 | * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present 34 | * @website https://github.com/cssinjs/jss 35 | * @license MIT 36 | */ 37 | 38 | /** @license React v0.19.0 39 | * scheduler.production.min.js 40 | * 41 | * Copyright (c) Facebook, Inc. and its affiliates. 42 | * 43 | * This source code is licensed under the MIT license found in the 44 | * LICENSE file in the root directory of this source tree. 45 | */ 46 | 47 | /** @license React v16.13.0 48 | * react-dom.production.min.js 49 | * 50 | * Copyright (c) Facebook, Inc. and its affiliates. 51 | * 52 | * This source code is licensed under the MIT license found in the 53 | * LICENSE file in the root directory of this source tree. 54 | */ 55 | 56 | /** @license React v16.13.0 57 | * react.production.min.js 58 | * 59 | * Copyright (c) Facebook, Inc. and its affiliates. 60 | * 61 | * This source code is licensed under the MIT license found in the 62 | * LICENSE file in the root directory of this source tree. 63 | */ 64 | -------------------------------------------------------------------------------- /styleguide/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Icecreamd Style Guide 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /utils/apiCollection.js: -------------------------------------------------------------------------------- 1 | // Read all the api from current documents 2 | 3 | const glob = require('glob'); 4 | const fs = require('fs'); 5 | 6 | const COMPONENT_NAME = /components\/([^/]*)/; 7 | const PROP_NAME = /^\s*\|\s*([^\s|]*)/; 8 | 9 | const components = {}; 10 | 11 | function mappingPropLine(component, line) { 12 | const propMatch = line.match(PROP_NAME); 13 | if (!propMatch) return; 14 | 15 | const propName = propMatch[1]; 16 | if (!/^[a-z]/.test(propName)) return; 17 | 18 | components[component] = Array.from(new Set([...(components[component] || []), propName])); 19 | } 20 | 21 | function apiReport(entities) { 22 | const apis = {}; 23 | Object.keys(entities).forEach(component => { 24 | const apiList = entities[component]; 25 | apiList.forEach(api => { 26 | if (typeof apis[api] === 'function') { 27 | apis[api] = []; 28 | } 29 | apis[api] = [...(apis[api] || []), component]; 30 | }); 31 | }); 32 | 33 | return apis; 34 | } 35 | 36 | function printReport(apis) { 37 | const apiList = Object.keys(apis).map(api => ({ 38 | name: api, 39 | componentList: apis[api], 40 | })); 41 | apiList.sort((a, b) => b.componentList.length - a.componentList.length); 42 | // eslint-disable-next-line no-console 43 | console.log('| name | components | comments |'); 44 | // eslint-disable-next-line no-console 45 | console.log('| ---- | ---------- | -------- |'); 46 | apiList.forEach(({ name, componentList }) => { 47 | // eslint-disable-next-line no-console 48 | console.log('|', name, '|', componentList.join(', '), '| |'); 49 | }); 50 | } 51 | 52 | module.exports = () => { 53 | glob('components/*/*.md', (error, files) => { 54 | files.forEach(filePath => { 55 | // Read md file to parse content 56 | const content = fs.readFileSync(filePath, 'utf8'); 57 | const component = filePath.match(COMPONENT_NAME)[1]; 58 | 59 | // Parse lines to get API 60 | const lines = content.split(/[\r\n]+/); 61 | lines.forEach(line => { 62 | mappingPropLine(component, line); 63 | }); 64 | }); 65 | 66 | printReport(apiReport(components)); 67 | }); 68 | }; -------------------------------------------------------------------------------- /utils/checkDiff.js: -------------------------------------------------------------------------------- 1 | const getProjectPath = require('./getProjectPath'); 2 | 3 | const fs = require('fs'); 4 | const chalk = require('chalk'); 5 | const fetch = require('node-fetch'); 6 | const readline = require('readline'); 7 | 8 | function getMajorVersion(version) { 9 | const match = version && version.match(/^\d+/); 10 | 11 | if (match) { 12 | return `@${match[0]}.x`; 13 | } 14 | 15 | return ''; 16 | } 17 | 18 | function getVersionFromURL(url, name) { 19 | const affix = url.slice(url.indexOf(name) + name.length + 1); 20 | return affix.slice(0, affix.indexOf('/')); 21 | } 22 | 23 | module.exports = function (packageName, packageVersion, done) { 24 | console.log(chalk.cyan('Fetching latest version file list...')); 25 | fetch(`https://unpkg.com/${packageName}${getMajorVersion(packageVersion)}/?meta`) 26 | .then(res => { 27 | const version = getVersionFromURL(res.url, packageName); 28 | return res.json().then(json => ({ version, ...json })); 29 | }) 30 | .then(({ version, files: pkgFiles }) => { 31 | // Loop all the exist files 32 | function flattenPath(files, fileList = []) { 33 | (files || []).forEach(({ path, files: subFiles }) => { 34 | fileList.push(path); 35 | flattenPath(subFiles, fileList); 36 | }); 37 | return fileList; 38 | } 39 | return { version, fileList: flattenPath(pkgFiles) }; 40 | }) 41 | .then(({ version, fileList }) => { 42 | // Find missing files 43 | const missingFiles = fileList.filter(filePath => !fs.existsSync(getProjectPath(filePath))); 44 | 45 | if (missingFiles.length) { 46 | console.log( 47 | chalk.red(`⚠️ Some file missing in current build (last version: ${version}):`) 48 | ); 49 | missingFiles.forEach(filePath => { 50 | console.log(` - ${filePath}`); 51 | }); 52 | return Promise.reject('Please double confirm with files.'); // eslint-disable-line prefer-promise-reject-errors 53 | } 54 | 55 | console.log( 56 | chalk.green('✅ Nothing missing compare to latest version:'), 57 | chalk.yellow(version) 58 | ); 59 | return 0; 60 | }) 61 | .then(done) 62 | .catch(err => { 63 | console.error(err); 64 | console.log(chalk.yellow('\nNeed confirm for file diff:')); 65 | 66 | function userConfirm() { 67 | const rl = readline.createInterface({ 68 | input: process.stdin, 69 | output: process.stdout, 70 | }); 71 | rl.question( 72 | ['Type "YES" to confirm it is safe.', 'Type "NO" to exit process.', ''].join('\n'), 73 | answer => { 74 | rl.close(); 75 | 76 | if (answer === 'YES') { 77 | console.log(chalk.green('✅ Confirm it is OK.')); 78 | done(); 79 | } else if (answer === 'NO') { 80 | console.log(chalk.red('🚫 Aha! Catch you!')); 81 | done(1); 82 | } else { 83 | console.log(chalk.yellow('Invalidate input. Type again!')); 84 | userConfirm(); 85 | } 86 | } 87 | ); 88 | } 89 | 90 | userConfirm(); 91 | }); 92 | }; -------------------------------------------------------------------------------- /utils/getBabelCommonConfig.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = (modules) => { 3 | return { 4 | presets: [ 5 | "@babel/preset-react", 6 | [ 7 | "@babel/preset-env", 8 | { 9 | modules, 10 | targets: { 11 | edge: "17", 12 | firefox: "60", 13 | chrome: "67", 14 | safari: "11.1" 15 | }, 16 | useBuiltIns: "usage" 17 | } 18 | ], 19 | ], 20 | plugins: [ 21 | // "babel-plugin-inline-import-data-uri", 22 | "@babel/plugin-transform-member-expression-literals", 23 | "@babel/plugin-transform-object-assign", 24 | "@babel/plugin-transform-property-literals", 25 | ["@babel/plugin-transform-runtime", { 26 | helpers: false, 27 | },], 28 | "@babel/plugin-transform-spread", 29 | "@babel/plugin-transform-template-literals", 30 | "@babel/plugin-proposal-export-default-from", 31 | "@babel/plugin-proposal-export-namespace-from", 32 | "@babel/plugin-proposal-object-rest-spread", 33 | [ 34 | "@babel/plugin-proposal-decorators", 35 | { legacy: true } 36 | ], 37 | "@babel/plugin-proposal-class-properties" 38 | ] 39 | } 40 | } -------------------------------------------------------------------------------- /utils/getNpm.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const runCmd = require('./runCmd'); 4 | 5 | module.exports = function (done) { 6 | if (process.env.NPM_CLI) { 7 | done(process.env.NPM_CLI); 8 | return; 9 | } 10 | runCmd('which', ['tnpm'], code => { 11 | let npm = 'npm'; 12 | if (!code) { 13 | npm = 'tnpm'; 14 | } 15 | done(npm); 16 | }); 17 | }; -------------------------------------------------------------------------------- /utils/getProjectPath.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const cwd = process.cwd(); 3 | 4 | module.exports = function getProjectPath(...filePath) { 5 | return path.join(cwd, ...filePath); 6 | } 7 | 8 | -------------------------------------------------------------------------------- /utils/getRunCmdEnv.js: -------------------------------------------------------------------------------- 1 | 2 | const path = require('path'); 3 | 4 | module.exports = function getRunCmdEnv() { 5 | const env = {}; 6 | Object.keys(process.env).forEach(key => { 7 | env[key] = process.env[key]; 8 | }); 9 | // make sure `antd-tools/node_modules/.bin` in the PATH env 10 | const nodeModulesBinDir = path.join(__dirname, '../../node_modules/.bin'); 11 | 12 | Object.entries(env) 13 | .filter( 14 | v => 15 | v 16 | .slice(0, 1) 17 | .pop() 18 | .toLowerCase() === 'path' 19 | ) 20 | .forEach(v => { 21 | const key = v.slice(0, 1).pop(); 22 | env[key] = env[key] ? `${nodeModulesBinDir}:${env[key]}` : nodeModulesBinDir; 23 | }); 24 | return env; 25 | }; -------------------------------------------------------------------------------- /utils/postcssConfig.js: -------------------------------------------------------------------------------- 1 | const rucksack = require('rucksack-css'); 2 | const autoprefixer = require('autoprefixer'); 3 | 4 | module.exports = { 5 | plugins: [rucksack(), autoprefixer()], 6 | }; -------------------------------------------------------------------------------- /utils/runCmd.js: -------------------------------------------------------------------------------- 1 | 2 | const isWindows = require('is-windows'); 3 | const getRunCmdEnv = require('./getRunCmdEnv'); 4 | 5 | function runCmd(cmd, _args, fn) { 6 | const args = _args || []; 7 | 8 | if (isWindows()) { 9 | args.unshift(cmd); 10 | args.unshift('/c'); 11 | cmd = process.env.ComSpec; 12 | } 13 | 14 | const runner = require('child_process').spawn(cmd, args, { 15 | // keep color 16 | stdio: 'inherit', 17 | env: getRunCmdEnv(), 18 | }); 19 | 20 | runner.on('close', code => { 21 | if (fn) { 22 | fn(code); 23 | } 24 | }); 25 | } 26 | 27 | module.exports = runCmd; -------------------------------------------------------------------------------- /utils/transformLess.js: -------------------------------------------------------------------------------- 1 | const less = require('less'); 2 | const { readFileSync } = require('fs'); 3 | const path = require('path'); 4 | const postcss = require('postcss'); 5 | const NpmImportPlugin = require('less-plugin-npm-import'); 6 | const postcssConfig = require('./postcssConfig'); 7 | 8 | function transformLess(lessFile, config = {}) { 9 | const { cwd = process.cwd() } = config; 10 | const resolvedLessFile = path.resolve(cwd, lessFile); 11 | 12 | let data = readFileSync(resolvedLessFile, 'utf-8'); 13 | data = data.replace(/^\uFEFF/, ''); 14 | 15 | // Do less compile 16 | const lessOpts = { 17 | paths: [path.dirname(resolvedLessFile)], 18 | filename: resolvedLessFile, 19 | plugins: [new NpmImportPlugin({ prefix: '~' })], 20 | javascriptEnabled: true, 21 | }; 22 | return less 23 | .render(data, lessOpts) 24 | .then(result => postcss(postcssConfig.plugins).process(result.css, { from: undefined })) 25 | .then(r => r.css); 26 | } 27 | 28 | module.exports = transformLess; --------------------------------------------------------------------------------