'Using Bootstrap Icons in Rails 6 with Webpacker

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?

cssruby-on-railstwitter-bootstrapbootstrap-4webpacker


Solution 1:[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!

Solution 2:[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/

Solution 3:[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

Solution 4:[4]

installation:

yarn add bootstrap-icons

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

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

Solution 5:[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

Solution 6:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cecomp64
Solution 2
Solution 3 Diego
Solution 4 stbnrivas
Solution 5
Solution 6 berrycake

Related Questions