React Suite Nav With Icon
Last Updated :
08 Jun, 2022
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
Share your thoughts in the comments
Please Login to comment...