16

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?

Greg
  • 2,359
  • 5
  • 22
  • 35

6 Answers6

23

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!

cecomp64
  • 657
  • 5
  • 10
12

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/

Greg
  • 2,359
  • 5
  • 22
  • 35
  • 1
    Should I move the answer to a comment or is leaving it in the revised post OK? I've seen revised posts. Thank you – Greg Mar 17 '20 at 17:47
  • 1
    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. – Cody Sep 05 '20 at 01:34
  • 1
    This solution will read each the time web page is render. This is a performance penalty. – Ivailo Bardarov Dec 20 '20 at 15:48
  • How to avoid that? For my app it doesn't matter, but not best practice. – Greg Dec 20 '20 at 21:24
10

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

Diego
  • 848
  • 7
  • 16
  • `application.scss:7 Uncaught Error: Cannot find module './fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d'` – Greg May 27 '21 at 21:34
  • `./fonts/`? It is supposed to start with `bootstrap-icons/font`. Double check my answer, I fixed some paths after I first posted it. – Diego May 28 '21 at 01:15
  • 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. – Greg May 28 '21 at 01:23
  • 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'` – Nilesh C May 29 '21 at 14:39
  • 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` – Diego May 31 '21 at 22:11
  • This solution worked for me locally and on Heroku. thanks a lot. – Karthikeyan A K Oct 11 '21 at 02:25
4

installation:

yarn add bootstrap-icons

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

require('bootstrap-icons/font/bootstrap-icons.css');
stbnrivas
  • 633
  • 7
  • 9
  • 1
    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` – Shooky Jul 02 '21 at 23:35
3
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
kangkyu
  • 5,252
  • 3
  • 34
  • 36
0

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.

berrycake
  • 1