Icomoon Icon Helper for Middleman (will probably work with Rails too)

01_README.md

Usage for middleman

• Add helper to lib/helpers and rename icon_helpers.rb
• Using Icomoon download your icons in SVG format.
• Add to the extracted zip to lib/assets
• Into config.rb add:
  • require 'lib/helpers/icon_helpers'
  • helpers IconHelpers
• You can now use<%= icon_tag(symbol: 'facebook') %> in your template

Usage for rails (untested)

• Add helper to app/helpers and rename icon_helpers.rb
• Replace Middleman::Application.root on line 18 with Rails.root
• Using Icomoon download your icons in SVG format.
• Add to the extracted zip to lib/assets
• Into config.rb add:
  • require 'lib/helpers/icon_helpers'
  • helpers IconHelpers
• You can now use<%= icon_tag(symbol: 'facebook') %> in your template

02_icon_helper.rb

module IconHelpers
  def icon_tag(symbol:, size: 32, prefix: 'icon')
    content_tag(:svg, symbol_paths(symbol, prefix).join('\n'),
                      class: "#{prefix} #{prefix}-#{symbol.to_s.dasherize}",
                      "aria-hidden" =>  true,
                      "xmlns" => "http://www.w3.org/2000/svg",
                      "xmlns:xlink" => "http://www.w3.org/1999/xlink",
                      height: size,
                      width: size,
                      role: 'img',
                      version: '1.1',
                      viewBox: "0 0 #{size} #{size}")
  end

  private

  def symbols
    File.open("#{Middleman::Application.root}/lib/assets/icomoon/symbol-defs.svg") do |f|
      Nokogiri::XML(f)
    end
  end

  def symbol_paths(symbol, prefix)
    symbols.css("##{prefix}-#{symbol} path").map do |path_element|
      tag(:path, d: path_element.attribute('d')).to_s.html_safe
    end
  end
end