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

Question

这是有关其图标用法的official bootstrap documentation:



如果要完全使用它，我想弄清楚如何使用该软件包。关于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

很老了，但是由于我遇到了同样的问题，而这些答案根本没有用，因此这是我想出的解决方案。
首先安装 bootstrap 图标包(--save还将其添加到您的依赖项中):

$ npm i bootstrap-icons --save

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

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

现在启动Frmo即可在应用程序中的任何位置使用它，就像引导文档中所预期的那样:

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