React Suite Nav With Icon

Pre-requisite: React Suite Introduction 

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Nav with Icon. A nav provides a list of multiple types of navigation menus, that can be landscape and portrait layouts. A nav in the react application can be created by adding icons in the navbar. 

Nav Icon Props:

• as: It is used to add a custom SVG icon component.
• fill: It is used to fill icon color.
• flip: It is used to flip icons.
• pulse: It is used to rotate icons with eight steps.
• rotate: It is used to rotate icons.
• spin: It is used to spin the icon.
• style: It is used to add or change icon styles.

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

 

Using Icons with Nav Component:

Step 1: Install the @rsuite/icons package into your project directory.

npm install --save @rsuite/icons

Step 2: Import the Icons in your function component from the package.

import { Gear, AddOutline } from '@rsuite/icons';

Syntax:

//Import Statement
import { IconName } from "@rsuite/icons";

//Function component
Function App () {

    return (
          <Nav>
            <Nav.Item icon={<IconName />}>Icon 1</Nav.Item>
            <Nav.Item icon={<IconName />}>Icon 2</Nav.Item>
            <Nav.Menu icon={<IconName />} title="More">
                  <Nav.Item icon={<IconName />}>Icon 3</Nav.Item>
                  <Nav.Item icon={<IconName />}>Icon 4</Nav.Item>
            </Nav.Menu>
          </Nav>
      );
}

Example 1: Below example demonstrates the basic Nav with icons.

Steps to run the application: Write the below code in the terminal to run the code:

npm start

Output:

 

Example 2: Below example demonstrates the basic Nav with colored icons.

Output:

 

Reference: https://rsuitejs.com/components/nav/#with-icon