DEV Community

Cover image for Icons with React-icons library
Mysterio
Mysterio

Posted on

Icons with React-icons library

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
Enter fullscreen mode Exit fullscreen mode

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

import {CgDarkMode,CgSun} from 'react-icons/cg'
Enter fullscreen mode Exit fullscreen mode

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

Usage -

<CgDarkMode color='white' size='5rem' />
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

Collapse
alibahaari profile image
Ali Bahaari

Instead of toggleMode, you can use setMode along with prevState.
After all, thanks for the article.

Collapse
shubhamtiwari909 profile image
Mysterio Author

Sure I will made these changes ❤️❤️