Icons with React-icons library

#html #react #javascript #npm

Hello Guys today i am going to show a great library for icons in React.

React Icons -
React icons are easy to use and it has a large variety of icons including bootstrap , fevicon , ant-design, ionicons 4 and 5 , Font-awesome etc all in one place.

Installation -

npm install react-icons --save

import -
import {icon_name} from 'react-icons/icon_type'

import {CgDarkMode,CgSun} from 'react-icons/cg'

Here icon names are CgDarkMode and CgSun and icon type is cg which represents css.gg icons.

Usage -

<CgDarkMode color='white' size='5rem' />

We have used the icon as a tag here and it has two attributes color which sets the color of the icon and size which sets the size of the icon how large it will look on the screen.

Dark mode Toggle Example with React icons -

import React,{useState} from 'react'
import {CgDarkMode,CgSun} from 'react-icons/cg'
import './App.css';

function App(){

const [mode, setMode] = useState(false);
const toggleMode = () => setMode(!mode);

return (
    <div>
        <div className='text-center my-5'>
            <button className='btn btn-dark text-light mx-5' onClick={toggleMode}>{mode ? 'Light mode' : 'Dark mode'}</button>
        </div>

        <div className='togglemode' style={{color:mode ? 'white' : 'black',backgroundColor:mode ? 'black':'white',padding:'1rem'}}>  
            <div style={{margin:'0 2rem'}}>
                    { mode ?
                    <CgDarkMode color='white' size='5rem' />
                    :
                    <CgSun color='yellow' size='5rem' />
                    }
            </div>
            <div>
                Veniam ex cillum consectetur veniam laboris consequat commodo esse aliquip id deserunt veniam culpa. 
                Laborum pariatur laboris nisi occaecat cupidatat amet qui ut tempor adipisicing elit ea sit. 
                Dolore cupidatat deserunt enim laborum magna duis veniam aliqua eiusmod consequat ullamco nulla duis mollit. 
                Minim Lorem officia nostrud officia ad cupidatat. Sunt do consequat mollit qui velit do fugiat officia esse
                 excepteur do pariatur incididunt ex. Fugiat voluptate id ea elit non minim fugiat sit velit. Dolore mollit 
                 sunt labore quis sunt ad eiusmod commodo mollit veniam sunt.
            </div>
        </div>
    </div>
)
}
export default App;

I have used these icons with conditonal rendering , when the mode is set to true the dark mode will get enable and when the mode is set to false the dark mode will be off.

NOTE - I have used bootstrap also in this example so, add bootstrap either using cdn or using npm.

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION PLEASE MENTION IT IN THE COMMENT SECTION

React Icons official Site - https://react-icons.github.io/react-icons