use bootstrap icons with npm

user_12557455 0
Viewed 22106

When I use any JS-module with NPM I include it into my .js file with require(""). How can I do the same with bootstrap icons and include them into .html? Their official docs and npm wasn't clear enough for me.

I don't use bootstrap in my project, only few icons, is it enough to have only this package?

npm install bootstrap-icons

Are bootstrap icons really free? Should you mention them in the project?

bootstrap-4 npm icons
4 Answers

Additional 28 June 2021

after import using NPM you can import CSS file to react with :

import "bootstrap-icons/font/bootstrap-icons.css";

and use like this :

<i className="icon bi-envelope"></i>

if you only want to use the bootstrap-icons.svg from node_modules, you can copy it manually or with webpack. If you copy in root folder, you can use like this :

<svg class="bi" width="32" height="32" fill="currentColor">
     <use xlink:href="bootstrap-icons.svg#bootstrap"/>
</svg>

If you copy in icons folder :

<svg class="bi" width="32" height="32" fill="currentColor">
     <use xlink:href="icons/bootstrap-icons.svg#bootstrap"/>
</svg>

or copy the icons/*.svg for use only icon what you need, and you can use it like this :

<img src="bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

Are bootstrap icons really free?

yes, bootstrap icons is free https://github.com/twbs/icons/blob/main/LICENSE.md

Should you mention them in the project?

you need to including copyright notice in your project. its enough, but if you want to mention it, create about page and included all software you use there that would be super nice.

note : Oct 2020

user_70581110 
npm install bootstrap-icons

Then open your app/javascript/stylesheets/application.scss and add the path to your bootstrap-icons.css file, usually, it should look like something like this

@import '~bootstrap-icons/font/bootstrap-icons';
user_114028040

npm i bootstrap-icons

Install this then import the below syntax.

import "bootstrap/dist/css/bootstrap.css";

import "bootstrap/dist/js/bootstrap.js";

after that use this link in index.html

`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">`

It's worked for me.

user_86559030

Add the following CDN to your index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrapicons@1.3.0/font/bootstrap-icons.css">
user_139366150
Related