Glassmorphism Style Icon Effect In React – icon-blur

A tiny React library that applies a Glassmorphism style frosted glass effect to icons.

How to use it:

1. Install and import the icon-blur library.

# NPM
$ npm i react-icon-blur

import IconBlur from "react-icon-blur";

2. Basic usage.

<IconBlur
  type="ROUNDED"
  src="icon.svg"
  size="100"
  onClick={() => alert("Done")}
/>;
<IconBlur
  type="CIRCLE"
  src="icon.svg"
  size="50"
  padding="10"
  onClick={() => alert("")}
/>;

3. Default component props.

interface IconProps {
  type: "ROUNDED" | "SQUARE" | "CIRCLE";
  src: string;
  size: number;
  padding: number;
  name?: string;
  onClick?: Function;
}

Preview:

Download Details:

Author: JP1016

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/JP1016/react-icon-blur

License: MIT