在npm中使用引导图标

当我将任何JS模块与NPM一起使用时，我会使用

require（“”

）将其包含到我的.JS文件中。我如何对它们执行相同的操作并将它们包含到.html中？ 他们的官方文件对我来说不够清楚

我在我的项目中不使用引导，只有几个图标，只有这个包就足够了吗

npm install bootstrap-icons

---

引导图标真的是免费的吗？您是否应该在项目中提及它们？

您需要从node_模块复制bootstrap-icons.svg，您可以手动或使用webpack进行复制。如果在根文件夹中复制，则可以使用以下方法：

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

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

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

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

或者复制icons/*.svg，以便只使用您需要的icon，您可以这样使用它：

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

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

引导图标真的是免费的吗

是的，引导图标是免费的

你应该在项目中提到他们吗

您需要在项目中包含版权声明。这就足够了，但若你们想提及它，那个么创建一个关于页面，并包括你们在那个里使用的所有软件，这将是非常棒的

注：2020年10月

npm install bootstrap-icons

然后打开你的

app/javascript/stylesheets/application.scss

并将路径添加到

bootstrap icons.css

文件中，通常情况下，它应该如下所示

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