icons-reactjs

icons-reactjs 🚀

Icons-reactjs is a component that allows you to display a large number and variety of built-in icons. It is a lightweight and very easy to use component that helps the developer to meet the requested requirements.

This shows icons in font format.

Installing 🔧

To install the component use the Node Package Manager (npm). You must open the command console at the root of your project and execute the command:

 npm install icons-reactjs --save 

Demo 💻

Click me to go to the demo on codeSandbox!

Usage 🛠️

Here is an example of how to implement the component:

import logo from './logo.svg';
import './App.css';
import IconsReactjs  from 'icons-reactjs';
function App() {
  return (
    <div className="App App-header">
      <div className=' container'>
        <div className=' row'>
          <div className='col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center'>
            <h1>Icons Component</h1>
            <img src={logo} className="App-logo" alt="logo" />
            <h2>icons-reactjs</h2>
            <br/>
            <IconsReactjs 
              icon={'check'} 
              fontSize={'2rem'} 
              color={'#0f5132'}
            />
            <br/>
            <IconsReactjs 
              icon={'github'} 
              fontSize={'2rem'} 
              color={'#0f5132'}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
export default App;

Props of styles 📦

Props for component styles are displayed as a table with Name, Type, Default, and Description as headings.

Required props are marked with *.

Name	Type	Default	Description
fontSize	string	2rem	Indicates the size of icon .
color	string	cornflowerblue	Indicates the color of icon.

Additional usage information 📋

Additional information about using the component pros.

• fontSize: Use this prop to indicate the size for icon component. Specify this as a string and in pixel format ("20px") or REM format ("1rem") or EM format ("1em") or the name of size("smaller", "medium", "large", " larger", "x-large", "xx-large").
• color: Use this prop for indicate the color of icon component. Specify this value as a string, in the format RGB hex ("#AA00FF") or RGB decimal ("rgb (71, 98, 176)") or RGB percentage ("rgb (27%, 38%, 69% ) ") or the name of the color ("white").

Props for functionality 📦

Props for component functionality are displayed as a table with Name, Type, Default, and Description as headers.

Required props are marked with *.

Name	Type	Default	Description
icon*	string		Indicates the name of the icon that the component will display

Additional usage information 📋

Additional information about using the component pros.

• icon: Use this prop to indicates the name of the icon that the component will display. This must be indicated as a string.For more information about icon names you can visit the following website: Go to view icons and icon names. Click me to see icons and icon names!

Authors ✒️

People who helped build the project from its inception

• Marvin Calvo Acuña - Software Development - marvinjesus
• Marvin Calvo Acuña - Documentation - marvinjesus

License 📄

This project is licensed under the ISC License - see the file LICENSE.md for details.