如何导入 Bootstrap5 字体图标以用于 Vue2 和树抖动？

问题描述

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

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

npm i bootstrap-icons

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

我正在使用 Vue-CLI。

感谢您的建议！

解决方法

从@this answer 的 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> 标记中的字体。