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.
Javascript
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.
Javascript
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
