Module: RailsHeroicon::Helper

Includes:
ActionView::Helpers::TagHelper
Defined in:
lib/rails_heroicon/helper.rb

Instance Method Summary collapse

Instance Method Details

#heroicon(symbol, title: nil, **options) ⇒ Object

To add a heroicon, call <%= heroicon "icon_name" %> on your erb template. Head over to heroicons.com to view all the icons.

Options

The helper method accepts mutiple arguments such as:

Variant

There are 4 types of variants: ‘outline’, ‘solid’, ‘mini’, and ‘micro’, the default being the ‘outline’. To specify the solid variant, call <%= heroicon "icon_name", variant: "solid" %>

HTML attributes

Any html attribute is supported, for eg:

<%= heroicon "icon_name", class: "text-gray-500", data: { controller: "icon" } %>

Handling the icon size

Normally, if you’re just using vanilla heroicons with tailwindcss, you’d set w-5 h-5 as class attributes on the svg. With this helper, you just need to set the size attribute on the icon.

<%= heroicon "icon_name", size: 20 %>

This will set the height and width attribute on the svg.

If the variant is set as outline or solid, size defaults to 24, if the variant is set as mini, size defaults to 20, and if the variant is set as micro<tt>, <tt>size defaults to 16. However, this can be over-written with the size attribute.

Accessibility

The helper method automatically sets aria-hidden=true if aria-label is not set, and if aria-label is set, then role=img is set automatically.



39
40
41
42
43
44
45
46
47
48
 
# File 'lib/rails_heroicon/helper.rb', line 39

def heroicon(symbol, title: nil, **options)
  cache_key = [symbol, title, options]
  return icon_cache[cache_key] if icon_cache[cache_key]

  icon = RailsHeroicon.new(symbol, **options)
  title_tag = content_tag(:title, title) if title
  tag = content_tag(:svg, title_tag.to_s.html_safe + icon.svg_path.html_safe, icon.options)
  icon_cache[cache_key] = tag
  tag
end