Import Icons in Rails 6.0 about icons HOT 5 CLOSED

Thanks a lot. Your answer helped me getting back on the road.

For others getting in my position:
I put all the icons on a folder "app/assets/icons" and wrote a little helper:

def icon(icon, options = {})
file = File.read("app/assets/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

In my view I call the icon with:
<%= icon("alert-circle", class: "text-success") %>

from icons.

Sorry, but we cannot help with how-to or general troubleshooting issues here; only bug reports and feature requests. You'll want to ask around in the official Slack team or Stack Overflow for this kind of thing.

I will say that there's no need to adjust CSS or JS to make these icons work. You'll want to drop them in an assets pipeline of some kind and include them via image tag or embedded HTML.

from icons.

I ran yarn add bootstrap-icons then following @chriskrams but changing the second line to file = File.read("node_modules/bootstrap-icons/icons/#{icon}.svg") which is where yarn installs the icons. For those with less experience that I, I put the code in app/helpers/<model name>.helper.rb in module <model name>Helper which had already been created.

In the interest of completeness

#app/helpers/people.helper.rb
module PeopleHelper
  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

I had tried imports and includes in application.js and application.scss before finding this post.

Thanks @chriskrams your little helper was a big help. (Couldn't resist. Social distancing stress.)

PS I think this could go on the https://icons.getbootstrap.com.

from icons.

@chriskrams @MtnBiker I've created a helper for handling with this in rails https://github.com/marcelolx/bootstrap-icons.

Only what you need to do is add bootstrap-icons-helper to your Gemfile and call something like this <%= bootstrap_icon "check", width: 5, height: 5, fill: "blue" %> on your views.

from icons.

This worked for me

Add bootstrap-icons to package.json:
$ yarn add bootstrap-icons

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

<!-- finally your views: -->
<i class="bi-bookmark-plus" />

from icons.