gradienticons

Gradienticons

Gradienticons is a versatile and customizable React icon component library with support for gradients, hover effects, and shape variations. It offers flexible input handling for all props, making it easy to use in various scenarios.

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
• 🔄 Flexible input handling for all props

Installation

npm install gradienticons

or

yarn add gradienticons

Usage

import { Icon } from 'gradienticons';

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

API

Prop	Type	Default	Description
name	string	-	Name of the icon
size	string | number	'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	string | 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	string | number	0	Border radius for square shape
padding	string | number	0	Inner padding
outerPadding	string | number	0	Outer padding
boxShadow	string	null	Box shadow CSS
iconShadow	string	null	Icon shadow CSS
cursor	string	'default'	Cursor style

Flexible Input Handling

Gradienticons now supports flexible input handling for all props. You can pass values as strings or numbers, and they will be correctly parsed and applied. For example:

<Icon
  size={80} // or "80px" or "5em"
  opacity={0.7} // or "0.7"
  borderRadius="10px" // or 10
  outerPadding="5" // or 5
/>

This flexibility makes it easier to use Gradienticons in various contexts and with different styling approaches.

License

MIT © [DHEERAJ]