LoginSignup
3
0

More than 3 years have passed since last update.

Railsでbootstrap-iconsを簡単に使う

Last updated at Posted at 2020-07-27

rails(webpacker)でbootstrap-iconsを使う方法

現時点ではv1.0.0-alpha5が最新なので今後変わると思います。

npm
npm install bootstrap-icons

yarn
yarn add bootstrap-icons

次に app/helpers/application_helper.rb に以下を追記します。

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

viewはslimを使用しているので

=icon("hdd", class: "text-gray")

で表示されます。

スクリーンショット 2020-07-28 0.10.44.png

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0