This article will show you how to add an icon in the navigation bar using React-Bootstrap. We will use React-Bootstrap because it makes it easy to use reusable components without implementing them.

Prerequisites

• ReactJS
• JSX
• React Bootstrap

Creating React App and Installing Module

Step 1: Create a React application using the following command

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Now install React-bootstrap and bootstrap

npm install react-bootstrap bootstrap

Step 4: Add Bootstrap CSS to index.js

import 'bootstrap/dist/css/bootstrap.min.css';

Project Structure

Project Structure

The updated dependencies in package.json will look like this:

{
    "name": "iconinnavbar",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^5.3.2",
        "react": "^18.2.0",
        "react-bootstrap": "^2.9.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Example: Now write down the following code in App.js file. Here App is our default component where we have written our code.

Steps To Run Application

Step: Run the application using following command from root directory of Application

npm start

Output: Now open the browser and type the ‘http://localhost:3000/’

Navbar with Icon