Using Bootstrap Icons in Rails 6 with Webpacker

Question

I wanted to use Bootstrap icons in beta "Official open source SVG icon library for Bootstrap." https://icons.getbootstrap.com/. This is for Bootstrap 4 in Rails 6.

I tried various imports and includes in application.js and application.scss with no success

How do I accomplish this?

Furthest

Answer 1

You can also use it via CSS, which I find convenient and familiar to the glyph icon support of old. First, add bootstrap-icons:

yarn add bootstrap-icons

Then, simply import it in your application.js file:

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

Finally, wherever you want to use it, just use an <i> tag:

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

That should be it!

Falsify

Works for me. Rails 6.1.4. – Unfetter

Answer 2

I found the basis of the solution on this GitHub discussion with @chriskrams supplying the key information.

I ran yarn add bootstrap-icons to install the icons.

I then created a helper in app/helpers/application_helper.rb. The empty module ApplicationHelper had been created automagically.

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/ is where yarn installs the icons.

To use the icons <%= icon("bicycle", class: "text-success") %> for example.

You can also see available icons in app/node_modules/bootstrap-icons/icons/

Furthest

Should I move the answer to a comment or is leaving it in the revised post OK? I've seen revised posts. Thank you – Furthest

Modified this slightly... file = File.read("#{Rails.root}/node_modules/bootstrap-icons/icons/#{icon}.svg") AND "alert-circle" isn't an icon, so for testing purposes anyone reading this may want to change that. – Governorship

This solution will read each the time web page is render. This is a performance penalty. – Cleodal

How to avoid that? For my app it doesn't matter, but not best practice. – Furthest

Answer 3

You need to override the default font definition to load the appropriate paths

yarn add bootstrap-icons

Then add to your 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");
}

Then you can use it:

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

Make sure you have Rails.application.config.assets.paths << Rails.root.join('node_modules') in your config/initializers/assets.rb

Summarize

application.scss:7 Uncaught Error: Cannot find module './fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d' – Furthest

./fonts/? It is supposed to start with bootstrap-icons/font. Double check my answer, I fixed some paths after I first posted it. – Summarize

I copied your application.scss today and bootstrap-icons/font/fonts/bootstrap-icons.woff2 exists in my node-modules. My fix still works, but I thought I'd try yours, but my set up must be a bit different. I reran yarn add bootstrap-icons and it had updated. – Furthest

This doesn't work for me. Followed your instructions to the T. ModuleNotFoundError: Module not found: Error: Can't resolve './fonts/bootstrap-icons.woff?856008caa5eb66df68595e734e59580d' in '/Users/xxx/xxx/xxx/app/javascript/packs' – Kepi

It's weird that your path says ./, it is not supposed to be a relative path. Make sure that path is correct and that node_modules is in your Rails.application.config.assets.paths – Summarize

This solution worked for me locally and on Heroku. thanks a lot. – Garnet

Answer 4

installation:

yarn add bootstrap-icons

just require into src/app/javascript/packs/application.js

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

Harumscarum

after having the same issues with the solutions above, this idea worked for me. I ended up adding import "bootstrap-icons/font/bootstrap-icons.css" to application.js – Julejulee

Answer 5

yarn add bootstrap-icons

Add the library first and then,

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

add this line (to app/assets/config/manifest.js file) to use bootstrap-icons.svg file as follows (if for 'shop' icon)

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

Like "sprite" on this page. https://icons.getbootstrap.com/#usage In this way you can size / change color in simpler way.

UPDATE:

In addition, we can write up a helper in this case.

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

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

For above, we can have something like:

  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

Unreflective

Answer 6

Using rails 6.1.5 and tailwind.

Installed using yarn add bootstrap-icons

then added import 'bootstrap-icons/font/bootstrap-icons.css' in application.js

Was able to add the icons using the <i> tag but somehow it shows 0 width or no stroke so I did added the following to scaffolds.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"); }

Now the icons are properly displayed.

Biogen