hover-animation

Animated Icons component built with React.

DEMO 1

click here to try demo

Demo 2

click here to try demo

Installation

npm install hover-animation

In order to use hover-animation, you have to install react-icons

for react-icons npm install react-icons

Docs

Step 1 In App.js, import {YourIcon} from "react-icons"

Step 2

import HoverAnimation1 from "hover-animation/HoverAnimation1"
import HoverAnimation2 from "hover-animation/HoverAnimation2"

Step 3

add HoverAnimation1 Component in your file while passing appropriate props and Icons

<HoverAnimation1 Icon={YourIcon} />

Parameters for HoverAnimation1

| Parameter | Default | Description | | --------------- | ------------------------------ | ------------------------------------------------------------------------------- | | Icon | NA | "This is to set Icon" | | IconSize | "2vmax" | "This is to set the size of Icon " | | Color | "white" | "This is to set the color of Icon | | BackgroundColor | "rgb(25,25,25) Almost Black" | "This is to set the Background Color | | Direction | "left" | "This is to set the Direction of animation, this could be left, right, down, up | | Circle | "true" | "Icon Shape could be circle or square" | | Padding | "1vmax" | "To set the Logo in Navbar" | | Transition | 0.5 | "To set Animation Transition" |

Parameters for HoverAnimation2

| Parameter | Default | Description | | --------------- | ------------------------------ | ------------------------------------------------------------------------------------- | | Icon | NA | "This is to set Icon" | | IconSize | "2vmax" | "This is to set the size of Icon " | | Color | "white" | "This is to set the color of Icon | | BackgroundColor | "rgb(25,25,25) Almost Black" | "This is to set the Background Color | | Pace | "medium" | "This is to the speed of animation, Pace can be slowest, slow, medium, fast, fastest" | | Circle | "true" | "Icon Shape could be circle or square" | | Padding | "1vmax" | "To set the Logo in Navbar" | | Transition | 0.5 | "To set Animation Transition" |

Please Must Install react-icons before using this Module

Created By @meabhisingh

My name is Abhishek Singh, a.k.a 6 pack programmer on YouTube. Hire me for a project , Hire

Youtube - Click Here

Instagram - Click Here

LinkedIn - Click