Css 在Rails 6和Webpacker中使用引导图标

我想在beta版“官方开源SVG引导图标库”中使用引导图标。这适用于Rails 6中的引导4

我尝试了各种导入，并将其包含在application.js和application.scss中，但没有成功

---

如何实现这一点？

我在这个GitHub上找到了解决方案的基础，其中@chriskrams提供了关键信息

我运行了添加引导图标来安装图标

然后我在

app/helpers/application\u helper.rb

中创建了一个助手。空的

模块ApplicationHelper

已自动创建

module ApplicationHelper
  def icon(icon, options = {})
    file = File.read("node_modules/bootstrap-icons/icons/#{icon}.svg")
    doc = Nokogiri::HTML::DocumentFragment.parse file
    svg = doc.at_css 'svg'
    if options[:class].present?
      svg['class'] += " " + options[:class]
    end
      doc.to_html.html_safe
  end
end

node\u模块/引导图标/图标/

是Thread安装图标的地方

例如，使用图标

您还可以在

app/node\u模块/引导图标/图标/

yarn add bootstrap-icons

首先添加库，然后

//= link_directory ../../../node_modules/bootstrap-icons .svg

添加此行（到

app/assets/config/manifest.js

文件）以使用

bootstrap icons.svg

文件，如下所示（如果用于“商店”图标）

对于以上内容，我们可以有如下内容：

def bi_图标（图标，选项={}）
Klass=[“bi”].append（options.delete（：class））.compact
content_标签：svg，options.merge（类：klasses，fill:“currentColor”）do
content_标记：use，nil，“xlink:href”=>“#{asset_path'引导图标/bootstrap icons.svg'}##{icon}”
结束
结束

您也可以通过CSS使用它，我发现CSS对旧版本的字形图标支持既方便又熟悉。首先，添加引导图标：

yarn add bootstrap-icons

然后，只需将其导入您的

application.js

文件：

import 'bootstrap-icons/font/bootstrap-icons.css'

最后，无论您想在哪里使用它，只需使用

标记即可：

<i class="bi bi-plus-circle"></i>

---

应该是这样

您需要覆盖默认字体定义以加载适当的路径

yarn add bootstrap-icons

然后添加到您的

应用程序中。scss

：

@import "bootstrap-icons/font/bootstrap-icons";
@font-face {
  font-family: "bootstrap-icons";
  src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"),
    font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}

然后您可以使用它：

<i class="bi bi-plus-circle"></i>

---

确保你有

Rails.application.config.assets.path我应该将答案移到注释中还是将其保留在修改后的帖子中好吗？我看过修改过的帖子。谢谢你稍微修改一下这个。。。file=file.read（“#{Rails.root}/node_modules/bootstrap icons/icons/#{icon}.svg”）和“alert circle”不是图标，因此出于测试目的，任何阅读此内容的人都可能希望更改此内容。此解决方案将在每次呈现网页时读取。这是对表现的惩罚。如何避免？对于我的应用程序来说，这不重要，但不是最佳实践。对我来说不起作用。
应用程序。scss:7未捕获错误：找不到模块。/fonts/bootstrap图标。woff2？856008CAA5EB66DF68595E734E5980D'
/fonts/
？它应该以
引导图标/font
开始。仔细检查我的答案，我在第一次发布后修复了一些路径。我今天复制了你的application.scss和
引导图标/font/font/bootstrap图标。woff2
存在于我的
节点模块中。我的修复仍然有效，但我想我会试试你的，但我的设置一定有点不同。我重新运行了
纱线添加引导图标
，它已经更新。这对我不起作用。按照您的说明操作T.
modulenofoundError:modulenotfound:Error:cannot resolve./font/bootstrap icons.woff？856008caa5eb66df68595e734e5980d'in'/Users/xxx/xxx/xxx/app/javascript/packs'
您的路径显示为
/
，这很奇怪，它不应该是一个相对路径。确保路径正确，并且
node\u modules
位于
Rails.application.config.assets.paths中
@import "bootstrap-icons/font/bootstrap-icons";
@font-face {
  font-family: "bootstrap-icons";
  src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"),
    font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}

<i class="bi bi-plus-circle"></i>