ReactJS - Icons

Web Icons are important assets in a web application. Developer use it extensively in multiple places to better visualize the context. For example, a menu can be made easily identifiable with a menu icon. Web icons has a long history and have multiple implementation throughout its long history.

Initially, icons are simple images in standard sizes, like 24x24, 32x32, 48x48, etc., Later, multiple icons are designed as single image called icon sprint as used in a website through CSS positioning property. Then, fonts are used to hold multiple icons and used through CSS font-family property. Latest in the list is the SVG icons. SVG icons are designed and saved in SVG format and used in the website either through img tag or inline SVG option.

React provides a community based icon library called React icons, which provides extensive set of icons from different icon library. Let us learn how to use react icon library in this chapter.

React icon (React-icon) library

React icon library collects thousand of icons from different vendor and wrap it as React component. Developer can use it as simple as including a react component to use a particular icon in their project. A small list of icon set provided by React icons is as follows −

  • Bootstrap icons

  • Material design icons

  • Font Awesome

  • Devicons

  • Boxicons

  • Ant Design icons

  • Github Octicons icons

  • VS Code icons

React icons provides much more set of icons and we can check all the icons at their website (https://react-icons.github.io/react-icons/)

Installing react icons library

Installing React icons library in a web application is as simple as installing a package using npm as shown below −

npm install react-icons --save

Using react icon component

Each icon in the library will have a relevant react component. Developer can find the icon component they need from the React icon library website and use it in their web application. Let us see how to use a calender icon from material design set from react icon library. The name of the calendar icon component from material design is MdCalendarToday. The package of material design icon set is react-icons/md. Developer need to import the package and should use the component in the relevant place as shown below −

import { MdCalendarToday } from "react-icons/md";
// ...
// ...
class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday /> is calendar icon imported from react icon library</div>
   }
}

Developer can change the color and size of the icon through CSS.

class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday style={{backgroundColor: "red", size: "24px"}}/>
      is calendar icon imported from react icon library</div>
   }
}

Applying react icon library

Let us learn the concept of forwardRef by developing an application.

First of all, create a new react application and start it using below command.

create-react-app myapp
cd myapp
npm start

Next, install the react icon library as shown below −

npm install react-icons --save

Next, open App.css (src/App.css) and remove all the CSS classes.

// remove the css

Next, create a simple component, SimpleIcon (src/Components/SimpleIcon.js) as shown below −

import React from "react";
import { MdCalendarToday } from "react-icons/md";
class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday style={{ color: "red", size: "24px" }} />
      is calendar icon imported from react icon library</div>
    }
}
export default SimpleIcon

Here,

  • Imported react-icons/md library.

  • Used MdCalendarToday component to render the calendar icon.

  • Used inline style to change the color and size of the icon.

Next, open App component (src/App.js) and update the content with SimpleIcon component as shown below −

import './App.css'
import React from 'react';
import SimpleIcon from './Components/SimpleIcon'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleIcon />
            </div>
         </div>
      </div>
   );
}
export default App;

Here,

  • Imported the SimpleIcon component.

  • Used SimpleIcon component to render the calender icon.

Finally, open the application in the browser. The calendar icon will be rendered as shown below −

Installing React Icons

Summary

React icon library helps developer by collecting all kind of icons from different sources and put it in one place and provides it in a simple and easy way.

Advertisements