Angular 如何在角度项目中以编程方式使用引导图标？

以下是有关其图标使用的详细信息：

我想知道如何使用这个软件包，如果我真的要用的话。他们的使用选项中没有一个对我6秒钟前被告知安装的软件包有任何说明

我只是不明白为什么文档会告诉我安装这个包，如果我要做的只是复制我需要的svg，然后卸载这个包

有没有什么方法可以让我按照实际的源代码控制的精神，将一个导入到一个角度组件中

编辑：回答为什么我没有按照回答

因为它根本不使用引导图标库。粘贴到您的响应中进行演示，堆栈溢出不使用引导

---

实际上，这就像使用引导css类一样。这些类可用于svg元素标记，如

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

---

当类中的bi提到引导图标时，bi V形右提到必须使用的图标。

*自v1.2.0版以来更新了添加了图标字体，请查看@BBoom提出的解决方案

您需要复制，或以任何方式复制bootstrap-icons.svg或icons/*.svg。你可以手工制作。如果在根目录中复制，则可以使用

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

 <img src="assets/img/shop.svg" alt="" width="32" height="32">

角度复制项目根目录中的bootstrap-icons.svg

如果你加上

  {
    "glob": "*.svg",
    "input": "./node_modules/bootstrap-icons/icons/",
    "output": "/assets/img/"
  }

角度复制assets/img中的*.svg，您可以使用

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

 <img src="assets/img/shop.svg" alt="" width="32" height="32">

---

很老了，但由于我遇到了同样的问题，这些答案根本没有帮助，所以我提出了一个解决方案

首先安装引导图标包（--save也会将其添加到依赖项中）：

然后将此行添加到styles.css文件：

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

从现在起，您可以在应用程序中的任何位置使用它，就像引导文档所预期的那样：

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

尝试使用npm软件包

---

模块允许您在angular应用程序中使用引导图标，而无需附加依赖项。

要使用sprite，这是我遵循并正在运行的过程：

npm i --save bootstrap-icons

然后在资产部分的./angular.json中，我添加了：

{
  "glob": "*.svg",
  "input": "./node_modules/bootstrap-icons/",
  "output": "/b-icons/"
}

然后，您可以直接使用模板上的图标：

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

Angular v11.1.0，引导图标v1.3.0这对我很有用

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
            ],

---

在angular.json文件中添加这样的内容

编辑的问题，为什么这不能回答这个问题如果您使用cdn链接，我们必须在index.html中添加cdn链接，或者您可以在angular.json文件的样式部分下添加位置我刚刚接受了投票最多的答案，因为当时我转到了另一个项目，但这里有一个投票，希望它能帮助别人！我只是考虑了这个答案，从版本V.1.2.0开始，这是一个非常有趣的答案：）也许我是盲人，但文档中没有提到这一点。你的答案不清楚，我花了大约10分钟，我已经实现了它，但什么都没有发生。

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
            ],