Skip to content

Instantly share code, notes, and snippets.

@SebAshton

SebAshton/01_README.md

Last active May 26, 2016 21:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SebAshton/790ec984b4cfa4459aa12a1887b93f45 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SebAshton/790ec984b4cfa4459aa12a1887b93f45 to your computer and use it in GitHub Desktop.
Download ZIP
Icomoon Icon Helper for Middleman (will probably work with Rails too)
Raw
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
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment