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