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

Question

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

因此，我安装了npm软件包如下：

npm i bootstrap-icons

but...now什么？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>

​

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

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

另外，为了彻底起见，我将提到您需要使用bootstrap-icons v1.2.0或更高版本的在<i>标记中使用它们作为字体。