gradienticons

Gradienticons

Gradienticons is a versatile and customizable React icon component library with support for gradients, hover effects, and shape variations.

Features

• 🎨 Support for solid colors and gradients
• 🖱️ Hover effects for colors and gradients
• 🔷 Multiple shape options (circle, square)
• 📏 Customizable size and padding
• 🔳 Background color and shape customization
• 💫 Box shadow and icon shadow effects

Installation

npm install gradienticons

or

yarn add gradienticons

Usage

import { Icon } from 'gradienticons';

function MyComponent() {
  return (
    <Icon
      name="home"
      size="50px"
      color="blue"
      gradientColors={['#ff00ff', '#00ffff']}
      hoverColor="red"
      shape="circle"
      backgroundColor="#f0f0f0"
    />
  );
}

API

Prop	Type	Default	Description
name	string	-	Name of the icon
size	string	'1em'	Size of the icon
color	string	'currentColor'	Color of the icon
gradientColors	array	null	Array of two colors for gradient
hoverColor	string	null	Color on hover
hoverGradientColors	array	null	Gradient colors on hover
directionStart	string	'topLeft'	Start direction of gradient
directionEnd	string	'bottomRight'	End direction of gradient
opacity	number	1	Opacity of the icon
backgroundColor	string	'transparent'	Background color
hoverBackgroundColor	string	null	Background color on hover
shape	string	'circle'	Shape of the icon ('circle' or 'square')
borderRadius	number	0	Border radius for square shape
padding	number	0	Inner padding
outerPadding	number	0	Outer padding
boxShadow	string	null	Box shadow CSS
iconShadow	string	null	Icon shadow CSS
cursor	string	'default'	Cursor style

License

MIT © [DHEERAJ]