How to add Bootstrap Icons in Next.js
Create next-js app:
First, we need to create a Next.js application using npx or yarn according to your choice.
if you already create a Next.js app, then skip this part
Type this command in your terminal or cmd:
npx create-next-app project-name(or)yarn create-next-app project-name
In my case, I create the next app using npx like this
npx create-next-app bootstrap-icon-with-nextjsFinally, we create out Next.js App
We add bootstrap-icons in Next.js in two methods :
- Install Bootstrap Icons - including SVGs and icon fonts with npm.
- Adding icon fonts stylesheet CDN link in Next.js inside <Head> Tag
Now, We start with a first method
Installing Bootstrap-Icons using npm command. (This is a highly recommended method)
Install Bootstrap Icons:
npm i bootstrap-iconsAfter installation, we need to import a CSS file in the Next.js custom page pages/_app.js file.
Important:
The _app.js file render all pages in the websites load the bootstrap-icons CSS
Now, We move on to the second method🚶♂️
Adding icon fonts stylesheet CDN link in Next.js inside <Head> Tag :
## Bootstrap-Icon CDN Link ##
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">## Import the module in the file ##
import Head from "next/head"
The Result for both methods:
Screenshot:
Finally, we install Bootstrap-Icons both methods.
I push all the code in the GitHub repository
Repository Link[with two branches for both methods]
for more details read the README.md file in my repo
💡Protip:
Run your Next.js App with diffrent port using this command
npx next -p 4_DIGIT_NUMBER
E.X : npx next -p 1998If this story really save your time give a clap 👏🏻 for me
Reference Link:
Bootstrap-Icons:
