module RailsHeroicon::Helper
Public Instance Methods
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