gradienticons

Gradienticons

Gradienticons is a powerful and flexible React icon component library that brings your icons to life with gradient support, hover effects, and shape variations. With its intuitive API and flexible input handling, Gradienticons makes it easy to create stunning, customizable icons for any React project.

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

Table of Contents

• Installation
• Quick Start
• Usage
• API Reference
• Flexible Input Handling
• Contributing
• License

Installation

You can install Gradienticons using npm or yarn:

npm install gradienticons

or

yarn add gradienticons

Quick Start

Here's a quick example to get you started with Gradienticons:

import React from 'react';
import { Icon } from 'gradienticons';

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Icon
        name="home"
        size={50}
        gradientColors={['#ff00ff', '#00ffff']}
        shape="circle"
        backgroundColor="#f0f0f0"
      />
    </div>
  );
}

export default App;

Usage

Gradienticons is designed to be flexible and easy to use. Here's a more detailed example showcasing various features:

import React from 'react';
import { Icon } from 'gradienticons';

function MyComponent() {
  return (
    <div>
      <Icon
        name="home"
        size={50} // or "50px" or "3em"
        color="blue"
        gradientColors={['#ff00ff', '#00ffff']}
        hoverColor="red"
        hoverGradientColors={['#ff0000', '#0000ff']}
        shape="circle"
        backgroundColor="#f0f0f0"
        hoverBackgroundColor="#e0e0e0"
        outerPadding={10} // or "10px"
        opacity={0.8} // or "0.8"
        boxShadow="0 4px 6px rgba(0, 0, 0, 0.1)"
        iconShadow="2px 2px 2px rgba(0, 0, 0, 0.5)"
        cursor="pointer"
      />
    </div>
  );
}

export default MyComponent;

API Reference

Prop	Type	Default	Description
name	string	-	Name of the icon (required)
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 supports flexible input handling for all props. You can pass values as strings or numbers, and they will be correctly parsed and applied. This flexibility makes it easier to use Gradienticons in various contexts and with different styling approaches.

Example:

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

Contributing

We welcome contributions to Gradienticons! If you'd like to contribute, please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please make sure to update tests as appropriate and adhere to the existing coding style.

License

Distributed under the MIT License. See LICENSE for more information.

---

MIT © [DHEERAJ]