module RailsHeroicon::Helper

Public Instance Methods

heroicon(symbol, title: nil, **options) click to toggle source

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 two types of variants: 'outline' and 'solid', 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, size automatically defaults to 24, and if the variant is set as solid, size automatically defaults to 20. 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.

# File lib/rails_heroicon/helper.rb, line 35
def heroicon(symbol, title: nil, **options)
  icon = RailsHeroicon.new(symbol, **options)

  title_tag = content_tag(:title, title) if title
  content_tag(:svg, title_tag.to_s.html_safe + icon.svg_path.html_safe, icon.options)
end