use bootstrap icons with npm

Question

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?

Answer 1

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

Answer 2

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';