How 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.

回答1:

*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">

回答2:

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

Frmo now on you can use it anywhere in your app, just like intended by the bootstrap documentation:

<i class="bi bi-star-fill"></i>

回答3:

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.

回答4:

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

回答5:

Actually it is just like using bootstrap css classes. These class can be used in svg element tags like

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

Where the bi in the class mentions Bootstrap Icons and bi-chevron-right mentions the icon which has to be used.

来源：https://stackoverflow.com/questions/60365440/how-to-programmatically-use-bootstrap-icons-in-an-angular-project

标签

angular

typescript

bootstrap-4

icons