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?
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
<i class....></i> wasn't working with my VueJS project. The import of the the .css was what was missing. Their doc doesn't cover that at all. Thanks.
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';
@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons"; Then use <i class="bi bi-chevron-bar-right"></i> in HTML. I see only white square. Should i copy something else from the bootstrap-icons npm folder)?
@import '~bootstrap-icons/font/bootstrap-icons.css';
@import '../node_modules/bootstrap-icons/font/bootstrap-icons.css. I tried importing with the tilde format, using the full relative path to the scss file, including the scss file. But it only worked to use a relative path from the scss file to the css file in the bootstrap-icons projectI installed the icons using yarn in my Next.js application
I followed the following steps
yarn add bootstrap-iconsimport "bootstrap-icons/font/bootstrap-icons.css"; to the index.tsx file (I'm using typescript)index.tsx like <i className="bi bi-list"></i>It worked for me
I installed the icons via npm
npm i bootstrap-icons
and added them to the style file
@import "~bootstrap-icons/font/bootstrap-icons";
, but instead of the icons I have the same squares (the same way I added Bootstrap styles from NPM and everything is fine with them). I tried all the add options from the documentation, nothing works (except for a full-fledged SVG).
Add the following CDN to your index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
