iconbutton-library v1.0.37

IconButton library

The IconButton Library provides a reusable React component for rendering a group of icons as buttons.

Installation To install the IconButton Library, you can use npm or yarn:

npm install iconbutton-library or yarn add iconbutton-library

Usage To use the IconButton component in your React application, you can import it and pass an array of buttons with the desired properties:

import React from 'react'; import { IconButton } from 'iconbutton-library';

const buttons = { id: 1, icon: YourIconComponent, // Replace YourIconComponent with your actual icon component onClick: () => { // Define the click action for this button }, size: 24, // Customize the size of the icon (optional) color: '#FF0000' // Customize the color of the icon (optional) }, // Add more button objects as needed ;

const YourComponent = () => { return (

<div>
  <IconButton buttons={buttons} />
</div>

); };

export default YourComponent;

Props The IconButton component accepts the following props:

buttons: An array of objects, each specifying the configuration for an individual icon button. Each button object should contain:

id: A unique identifier for the button. icon: The icon component to be rendered. onClick: The function to be executed on button click. size (optional): Size of the icon. color (optional): Color of the icon.

Example Here's an example of how you can use the IconButton component:

Import the ButtonGroupIcons component into your React application: import { ButtonGroupIcons, Icon } from 'buttongroupicons-library';

// Import necessary components and libraries import React from 'react'; import { IconButton } from 'iconbutton-library'; // Define your icon component (replace YourIconComponent) const YourIconComponent = ({ size, color }) => ( // Your icon implementation here );

const buttons = { id: 1, icon: YourIconComponent, onClick: () => { // Define the click action for this button }, size: 24, color: '#FF0000' }, // Add more button objects as needed ;

const YourComponent = () => { return (

<div>
  <IconButton buttons={buttons} />
</div>

); };

export default YourComponent;

Dependencies The Icon Button relies on the following dependencies:

@babel/cli, @babel/core, @babel/preset-env, @babel/preset-react, babel-loader: Babel dependencies for transpiling. css-loader, style-loader: Loaders for handling CSS files. react: React library. webpack, webpack-cli: Bundling and build tools.