🚀
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.