hover-animation

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