vuejs2 - 如何导入 Bootstrap5 字体图标以用于 Vue2 和摇树？

Question

我正在创建一个 Vue2 应用程序并想使用 Bootstrap5 图标。具体来说，我希望能够使用“图标字体”类型（即<i class="bi-alarm"></i>）而不是嵌入 SVG 元素。

所以，我已经像这样安装了 npm 包：

npm i bootstrap-icons

但是……现在呢？Bootstrap5 图标文档没有进一步说明。我需要安装 SASS 包吗？我应该创建一个 Vue 插件吗？或者，只是根据需要为每个组件导入图标？

我正在使用 Vue-CLI。

谢谢你的任何提示！

Answer 1

从@ Anonymous的这个答案中得到提示，您需要从包中导入 CSS 才能使用标签中的图标。<i>

与从 CDN 导入的方式大致相同：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

<div>
<p>This is an icon test:</p>
<i class="bi-alarm"></i>
<i class="bi bi-sunglasses" style="font-size: 5rem; color: blue;"></i>
<i class="bi-suit-heart-fill" style="font-size: 2rem; color: red;"></i>
</div>

...您应该能够通过以下方式将其main.css从已安装的软件包本地导入到您的文件（或等效文件）中：

@import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');

此外，为了彻底，我会提到您需要使用bootstrap-icons v1.2.0 或更高版本才能将它们用作<i>标签中的字体。