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.

import React from "react";
import { Nav } from "rsuite";
import { Check, Page, Tag, Task } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";

function App() {
    return (
        <div style={{ padding: 10, 
                      backgroundColor: 'indigo' }}>
            <Nav>
                <Nav.Item icon={<Task />}>
                    Practice </Nav.Item>
                <Nav.Item icon={<Page />}>
                    Tutorials</Nav.Item>
                <Nav.Menu title="Jobs">
                    <Nav.Item icon={<Check />}>
                        Apply</Nav.Item>
                    <Nav.Item icon={<Tag />}>
                        Job-a-thon</Nav.Item>
                </Nav.Menu>
            </Nav>

        </div>
    );
}

export default App;

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.

import React from "react";
import { Nav } from "rsuite";
import { Check, Edit, FolderFill, Page, Tag, Task } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";

function App() {
  return (
    <div style={{ padding: 10, 
                  backgroundColor: '#F4F5F4'}}>
      <Nav>
        <Nav.Item icon={<Task color="red" />}>
            Practice </Nav.Item>
        <Nav.Item icon={<Page color="green" /> }>
            Articles</Nav.Item>
        <Nav.Item icon={<FolderFill color="#f5a623" />}>
            Courses</Nav.Item>
        <Nav.Menu title="Jobs">
          <Nav.Item icon={<Check color="blue" />}>
              Apply</Nav.Item>
          <Nav.Item icon={<Tag color="orange" />}>
              Job-a-thon</Nav.Item>
          <Nav.Item icon={<Edit color="cyan" />}>
              Internships</Nav.Item>
        </Nav.Menu>
      </Nav>
      
    </div>
  );
}

export default App;

Output:

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