将引导图标与npm一起使用

Question

当我在NPM中使用任何JS模块时，我会用require("")将它包含到我的.js文件中。我如何使用bootstrap icons做同样的事情，并将它们包含到.html中？他们的官方docs和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>

如果在icons文件夹中复制：

<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';