├── LICENSE
├── .prettierrc
├── preview.png
├── .npmignore
├── rollup.config.js
├── tsconfig.json
├── README.md
├── .gitignore
├── src
    ├── styles.scss
    └── index.tsx
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
1 | Apache 2.0 License


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JP1016/react-icon-blur/HEAD/preview.png


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | dist
2 | .babelrc
3 | .storybook
4 | .gitignore
5 | .prettierrc
6 | rollup.config.js
7 | tsconfig.json
8 | LICENSE


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import sass from 'rollup-plugin-sass'
 2 | import typescript from 'rollup-plugin-typescript2'
 3 | 
 4 | import pkg from './package.json'
 5 | 
 6 | export default {
 7 |   input: 'src/index.tsx',
 8 |   output: [
 9 |     {
10 |       file: pkg.main,
11 |       format: 'cjs',
12 |       exports: 'named',
13 |       sourcemap: true,
14 |       strict: false
15 |     }
16 |   ],
17 |   plugins: [sass({ insert: true }), typescript()],
18 |   external: ['react', 'react-dom']
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "dist",
 4 |     "module": "esnext",
 5 |     "target": "es5",
 6 |     "lib": ["es6", "dom", "es2016", "es2017"],
 7 |     "sourceMap": true,
 8 |     "allowJs": false,
 9 |     "jsx": "react",
10 |     "declaration": true,
11 |     "moduleResolution": "node",
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noImplicitReturns": true,
14 |     "noImplicitThis": true,
15 |     "noImplicitAny": true,
16 |     "strictNullChecks": true,
17 |     "suppressImplicitAnyIndexErrors": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true
20 |   },
21 |   "include": ["src"],
22 |   "exclude": ["node_modules", "dist", "example", "rollup.config.js"]
23 | }
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🌠 react-icon-blur
 2 | 
 3 | a tiny react library that can be used to create frosted glass effect of icons.
 4 | 
 5 | ## Preview
 6 | ![preview](https://imgur.com/a0P7xon.gif)
 7 | 
 8 | ## How to use
 9 | 
10 | <img src="https://github.com/JP1016/react-icon-blur/blob/master/preview.png" width=50% height=50%>
11 | 
12 | Installation
13 | 
14 | `npm i react-icon-blur`
15 | 
16 | Usage & Documentation
17 | 
18 | [Click here for the documentation](https://codekeep.io/code-snippet/react-icon-blur)
19 | 
20 | 
21 | Show your support
22 | 
23 | Give a ⭐️ if this project helped you! 🥰
24 | 
25 | If you like this app , Star it on Github, Follow me on Twitter
26 | 
27 | Made with ❤️ by <a href="https://twitter.com/JP1016v1"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/jp1016v1?style=social"> </a>
28 | 
29 | License
30 | 
31 | Apache 2.0 License
32 | 


--------------------------------------------------------------------------------
/.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 | # Directory for instrumented libs generated by jscoverage/JSCover
10 | lib-cov
11 | 
12 | # Coverage directory used by tools like istanbul
13 | coverage
14 | *.lcov
15 | 
16 | # nyc test coverage
17 | .nyc_output
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (https://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directories
26 | node_modules/
27 | jspm_packages/
28 | 
29 | # TypeScript v1 declaration files
30 | typings/
31 | 
32 | # TypeScript cache
33 | *.tsbuildinfo
34 | 
35 | # Optional npm cache directory
36 | .npm
37 | 
38 | # Optional eslint cache
39 | .eslintcache
40 | 
41 | # Output of 'npm pack'
42 | *.tgz
43 | 
44 | # Yarn Integrity file
45 | .yarn-integrity
46 | 
47 | # generate output
48 | dist
49 | 
50 | #vscode
51 | .vscode


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
 1 | .icon-wrapper {
 2 |   .icon-container {
 3 |     .icon {
 4 |       position: relative;
 5 |       display: flex;
 6 |       align-items: center;
 7 |       justify-content: center;
 8 |       overflow: hidden;
 9 |       box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
10 |       img {
11 |         z-index: 2;
12 |         filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
13 |       }
14 | 
15 |       .background {
16 |         position: absolute;
17 |         z-index: 1;
18 |         pointer-events: none;
19 |         top: 0;
20 |         left: 0;
21 |         width: 100%;
22 |         height: 100%;
23 |         transform: scale(2);
24 |         filter: blur(13px) opacity(0.2);
25 |       }
26 |     }
27 | 
28 |     .rounded {
29 |       border-radius: 10%;
30 |     }
31 | 
32 |     .square {
33 |       border-radius: 0%;
34 |     }
35 | 
36 |     .circle {
37 |       border-radius: 100%;
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import './styles.scss'
 3 | 
 4 | interface IconProps {
 5 |   type: 'ROUNDED' | 'SQUARE' | 'CIRCLE'
 6 |   src: string
 7 |   size: number
 8 |   padding: number
 9 |   name?: string
10 |   onClick?: Function
11 | }
12 | 
13 | const IconBlur = (props: IconProps) => (
14 |   <div
15 |     className="icon-wrapper"
16 |     onClick={() => props.onClick && props.onClick()}
17 |   >
18 |     <div className={`icon-container ${props.onClick ? 'pointer' : ''}`}>
19 |       <div
20 |         className={`icon ${props.type.toLowerCase()}`}
21 |         style={{
22 |           padding: props.padding ? `${props.padding}px` : '5px',
23 |           width: props.size ? `${props.size}px` : '100px',
24 |         }}
25 |       >
26 |         <img alt="" aria-hidden src={props.src} className="background" />
27 |         <img alt={`icon-${props.name}`} src={props.src} width="100%" />
28 |       </div>
29 |     </div>
30 |   </div>
31 | )
32 | 
33 | export default IconBlur
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-icon-blur",
 3 |   "version": "1.0.3",
 4 |   "description": "Icon Blur Library",
 5 |   "author": "Jithin Pariyarath",
 6 |   "license": "Apache-2.0",
 7 |   "repository": "JP1016/react-icon-blur",
 8 |   "main": "dist/index.js",
 9 |   "engines": {
10 |     "node": ">=8",
11 |     "npm": ">=5"
12 |   },
13 |   "scripts": {
14 |     "build": "rollup -c",
15 |     "start": "rollup -c -w"
16 |   },
17 |   "dependencies": {},
18 |   "peerDependencies": {
19 |     "react": ">= 16.8.0 < 2",
20 |     "react-dom": ">= 16.8.0 < 2"
21 |   },
22 |   "devDependencies": {
23 |     "@types/react": "^16.3.13",
24 |     "@types/react-dom": "^16.0.5",
25 |     "babel-core": "^6.26.3",
26 |     "babel-runtime": "^6.26.0",
27 |     "react": "^16.12.0",
28 |     "react-dom": "^16.12.0",
29 |     "rollup": "^1.29.0",
30 |     "rollup-plugin-sass": "^1.2.2",
31 |     "rollup-plugin-typescript2": "^0.25.3",
32 |     "typescript": "^2.8.3"
33 |   },
34 |   "files": [
35 |     "dist"
36 |   ],
37 |   "keywords": [
38 |     "react-icon-blur",
39 |     "icon-blur",
40 |     "image-blur",
41 |     "blurred-icon",
42 |     "blurred-image",
43 |     "icon-blur-effect",
44 |     "blurred-effect"
45 |   ]
46 | }
47 | 


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