iconbutton-library
v1.0.37
Published
button group icons
Downloads
2
Readme
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 ( ); };
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 ( ); };
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.