在 npm 中使用引导图标

Question

当我在 NPM 中使用任何 JS 模块时，我将它包含到我的 .js 文件中，并带有 .js 文件require("")。如何对引导程序图标执行相同操作并将它们包含到 .html 中？他们的官方文档 和npm对我来说还不够清楚。

我的项目中没有使用bootstrap，只有几个图标，只有这个包就够了吗？

npm install bootstrap-icons

引导图标真的免费吗？你应该在项目中提到它们吗？

Answer 1

2021 年 6 月 28 日追加

使用 NPM 导入后，您可以导入 CSS 文件以进行响应：

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

并像这样使用：

<i className="icon bi-envelope"></i>

如果你只想使用 node_modules 中的 bootstrap-icons.svg，你可以手动或使用 webpack 复制它。如果在根文件夹中复制，则可以像这样使用：

<svg class="bi" width="32" height="32" fill="currentColor">
     <use xlink:href="bootstrap-icons.svg#bootstrap"/>
</svg>

如果您在图标文件夹中复制：

<svg class="bi" width="32" height="32" fill="currentColor">
     <use xlink:href="icons/bootstrap-icons.svg#bootstrap"/>
</svg>

或复制icons/*.svg 以仅使用您需要的图标，您可以像这样使用它：

<img src="bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

引导图标真的免费吗？

是的，引导程序图标是免费的https://github.com/twbs/icons/blob/main/LICENSE.md

你应该在项目中提到它们吗？

您需要在您的项目中包含版权声明。足够了，但是如果您想提及它，请创建关于页面并包含您在那里使用的所有软件，这将非常好。

注：2020 年 10 月

Answer 2

npm install bootstrap-icons

然后打开您app/javascript/stylesheets/application.scss 的bootstrap-icons.css文件并将路径添加到您的文件中，通常，它应该看起来像这样

@import '~bootstrap-icons/font/bootstrap-icons';