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

Question

这是有关其图标使用的官方引导程序文档：

我想弄清楚如何使用这个包，如果我应该使用它的话。他们的使用选项都没有说明 6 秒前我被告知要安装的软件包。

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

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

编辑：为了回应为什么我没有按照答案中的建议使用以下 html <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>

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

Answer 1

很老了，但由于我遇到了同样的问题，而这些答案根本没有帮助，这是我想出的解决方案。

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

$ npm i bootstrap-icons --save

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

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

从现在开始，你可以在你的应用程序的任何地方使用它，就像引导程序文档中的那样：

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

Answer 2

* v1.2.0 版本更新，新增图标字体，请看@BBoom 提出的解决方案

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

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

如果您在资产文件夹中复制

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

好吧，您可以对 Angular 说为您复制文件。为此，您可以更改 angular.json 文件，因此如果您添加到资产中：

   "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "glob": "bootstrap-icons.svg",
        "input": "./node_modules/bootstrap-icons/",
        "output": "/"
      }
    ],

Angular 复制项目根目录中的 bootstrap-icons.svg，

如果添加

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

Angular 复制 assets/img 中的 *.svg 就可以使用

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

Answer 3

这对我有用

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

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