0
886
VistasHow to programmatically use bootstrap icons in an angular project?
Here is the official bootstrap documentation on the usage of their icons:
I'm trying to figure out how to use the package, if I'm supposed to be using it at all. None of their usage options say anything about the package I was told to install 6 seconds ago.
I just don't understand why the documentation would tell me to install the package if all I was supposed to do was copy the svg's I needed and then uninstall the package.
Is there some way for me to import one into an angular component, in the spirit of actual source control?
EDIT: in response to why I'm not using the following html as recommended in an answer <svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
is because this doesn't use the bootstrap icon library at all. Pasted into your response for demonstration, and stack overflow doesn't use bootstrap.
5 Respuestas
Responde la pregunta0
*Updated since version v1.2.0, is added Icon fonts, please, take a look the solution proposed by @BBoom
You need copy, or the bootstrap-icons.svg or the icons/*.svg in any way. You can make it manually. If you copy in root, you can use
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
If you copy in assets folder
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#heart-fill"/>
</svg>
Well, you can say to Angular that copy the files for you. For this you can change the angular.json file, so if you add to assets:
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "bootstrap-icons.svg",
"input": "./node_modules/bootstrap-icons/",
"output": "/"
}
],
Angular copy the bootstrap-icons.svg in root of your project,
If you add
{
"glob": "*.svg",
"input": "./node_modules/bootstrap-icons/icons/",
"output": "/assets/img/"
}
Angular copy the *.svg in assets/img and you can use
<img src="assets/img/shop.svg" alt="" width="32" height="32">
0
To use the sprite, this is the process that I followed and is working:
npm i --save bootstrap-icons
Then in ./angular.json inside the assets section I added:
{
"glob": "*.svg",
"input": "./node_modules/bootstrap-icons/",
"output": "/b-icons/"
}
Then you can use the icons directly on your template:
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
Angular v11.1.0, bootstrap-icons v1.3.0
0
Quite old, but since I had the same problem and these answers where not helpful at all, here is the Solution I came up with.
First install the bootstrap icons package (--save adds it to your dependencies as well):
$ npm i bootstrap-icons --save
Then add this line to your styles.css file:
@import "~bootstrap-icons/font/bootstrap-icons.css";
From now on you can use it anywhere in your app, just like intended by the bootstrap documentation:
<i class="bi bi-star-fill"></i>
0
try to use npm package https://www.npmjs.com/package/ngx-bootstrap-icons.
module allows you to use the Bootstrap Icons in your angular application without additional dependencies.
0
This works for me
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap-icons/font/bootstrap-icons.css"
],
Add like this in angular.json file