在带有 Webpacker 的 Rails 6 中使用引导图标

Question

我想在测试版“Bootstrap 的官方开源 SVG 图标库”中使用 Bootstrap 图标。 https://icons.getbootstrap.com/。这适用于 Rails 6 中的 Bootstrap 4。

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

我该如何做到这一点？

Answer 1

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

我运行yarn add bootstrap-icons 来安装图标。

然后我在app/helpers/application_helper.rb 中创建了一个助手。空的module 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_modules/bootstrap-icons/icons/ 是 yarn 安装图标的地方。

以使用图标<%= icon("bicycle", class: "text-success") %> 为例。

您还可以在app/node_modules/bootstrap-icons/icons/中查看可用图标

Answer 2

yarn add bootstrap-icons

先添加库，再添加，

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

添加这一行（到app/assets/config/manifest.js 文件）以使用bootstrap-icons.svg 文件如下（如果用于“商店”图标）

<svg class="bi" fill="currentColor">
  <use xlink:href="<%= asset_path "bootstrap-icons/bootstrap-icons.svg" %>#shop"/>
</svg>

喜欢这个页面上的“精灵”。 https://icons.getbootstrap.com/#usage 通过这种方式，您可以更简单地调整大小/更改颜色。

更新：

此外，在这种情况下，我们可以编写一个助手。

<%= bi_icon 'shop', class: 'shop-style' %>

.shop-style {
  width: 16px; height: 16px; color: red;
}

对于上面，我们可以有类似的东西：

  def bi_icon(icon, options = {})
    klasses = ["bi"].append(options.delete(:class)).compact
    content_tag :svg, options.merge(class: klasses, fill: "currentColor") do
      content_tag :use, nil, "xlink:href" => "#{ asset_path 'bootstrap-icons/bootstrap-icons.svg' }##{icon}"
    end
  end

Answer 3

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

yarn add bootstrap-icons

然后，只需将其导入您的 application.js 文件：

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

最后，无论你想在哪里使用它，只需使用<i> 标签：

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

应该是这样的！

Answer 4

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

yarn add bootstrap-icons

然后添加到您的application.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>

确保您的config/initializers/assets.rb 中有Rails.application.config.assets.paths << Rails.root.join('node_modules')

Answer 5

安装：

yarn add bootstrap-icons

只需要进入 src/app/javascript/packs/application.js

require('bootstrap-icons/font/bootstrap-icons.css');