Steps to Create the React App and Installing Module
Step 1: Create a new React.js project and install the required dependencies:-
npx create-react-app my-react-app
Step 2: Navigate to the root directory of your project using the following command.
cd my-react-app
Step 3: Install the required packages in your project using the following command.
npm install bootstrap bootstrap-icons
The updated dependencies in package.json file of frontend will look like:
"dependencies": {
"bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
}
Step 4: Import bootstrap icon in app.js file
import 'bootstrap-icons/font/bootstrap-icons.css';
Example: Below is an example of adding bootstrap icons in react.
import logo from "./logo.svg";
import "./App.css";
import "bootstrap-icons/font/bootstrap-icons.css";
function App() {
return (
<div className="App">
<i class="bi bi-airplane-engines-fill"></i>
</div>
);
}
export default App;
Output:
how to add bootstrap icon in react
How to use Bootstrap Icons in React ?
React is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. It’s great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to update and organize stuff without the whole page refreshing. It’s like having building blocks for your website that you can rearrange anytime.
Contact Us