如何导入 Bootstrap 5 字体图标以用于 Vue 2 和 tree shake？

Question

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

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

npm i bootstrap-icons

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

我正在使用 Vue-CLI。

感谢您的任何提示！

Answer 1

根据 this answer by @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> 标签。

如何导入 Bootstrap 5 字体图标以用于 Vue 2 和 tree shake？

How to import Bootstrap5 font icons for use in Vue2 and tree shake?

vuejs2

bootstrap-5

bootstrap-icons