Add bootstrap icons in React
Today, we will show you how to add bootstrap icons in React application. There are multiple icons libraries to render icons in React application like Font Awesome, Ant Design Icons, Flat Color Icons, etc.
Demo Application
Output - Add bootstrap icons in React - Clue Mediator
Add bootstrap icons in React
1. Project structure
Refer to the following project structure for demo application.
-
react-bootstrap-icons
-
node_modules
-
public
- index.html
-
src
- App.js
- index.css
- index.js
-
package-lock.json
-
package.json
-
README.md
-
2. Package dependencies
In this example, we have to install the bootstrap-icons npm package. Run the following command to install the `bootstrap-icons`.
npm i bootstrap-icons
You will find the version of following packages in React application.
react
^18.2.0
bootstrap-icons
^1.10.3
3. Add bootstrap icons in component
First, we have to add the following CSS in React component.
import 'bootstrap-icons/font/bootstrap-icons.css';
Now, simply add the following HTML tag to load the icon.
<p>
You'reĀ
<i class="bi bi-hand-index-thumb-fill">
awesome!
<i class="bi bi-emoji-heart-eyes">
</i></i></p><i class="bi bi-hand-index-thumb-fill"><i class="bi bi-emoji-heart-eyes">
</i></i>
__### 4. OutputLetās combine all code together and see how it looks.App.js``` import React from 'react'; import 'bootstrap-icons/font/bootstrap-icons.css';
function App() { return (
export default App;
Thank you for reading. Happy Coding..!! š____### ____Demo & Source Code________[GitHub Repository](https://github.com/cluemediator/react-bootstrap-icons) [StackBlitz Project](https://stackblitz.com/edit/react-glrrfh)<!-- /wp:html -->______