如何以编程方式在 angular 项目中使用 bootstrap 图标？

Question

这里是official bootstrap documentation他们图标的用法：

我正在尝试弄清楚如何使用这个包，如果我真的应该使用它的话。 None 他们的使用选项说任何关于 6 秒前我被告知要安装的软件包。

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

本着实际源代码控制的精神，我可以通过某种方式将一个导入 angular 组件吗？

编辑：回应为什么我没有按照答案 <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>

中的建议使用以下 html

是因为这根本没有使用bootstrap图标库。粘贴到您的响应中以进行演示，堆栈溢出不使用 bootstrap.

Answer 1

*更新从v1.2.0版本开始，增加了Icon字体，请看@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 2

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

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

$ npm i bootstrap-icons --save

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

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

从现在开始，您可以在应用程序的任何位置使用它，就像 bootstrap 文档中的意图一样：

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

Answer 3

尝试使用 npm 包 https://www.npmjs.com/package/ngx-bootstrap-icons.

模块允许您在 angular 应用程序中使用 Bootstrap 图标而无需其他依赖项。

Answer 4

要使用精灵，这是我遵循并正在工作的过程：

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，bootstrap-图标 v1.3.0

Answer 5

这对我有用

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

在angular.json文件中这样添加

如何以编程方式在 angular 项目中使用 bootstrap 图标？

How to programmatically use bootstrap icons in an angular project?

icons

typescript

bootstrap-4

angular