rails_iowaicon

Rails Heroicon

Ruby on Rails views helper for Iowa branded icons. To see all the icons visit Iowa Branding.

500 icons included as of today.

This gem started as a fork of rails_heroicon

Installation

Add this line to your application's Gemfile:

gem "rails_iowaicon"

And then execute:

bundle install

Or install it yourself as:

gem install rails_iowaicon

Usage

After installing the gem, call <%= heroicon "user" %> on your erb template. The first argument is the icon name. All the icons are listed here.

This will generate the following html:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  version="1.1"
>
  <path
    d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Variant

rails_iowaicon provides 2 variants, outline and solid, outline being the default.

To change the variant <%= iowaicon "graduation-cap", variant: "solid" %>.

HTML attributes

Any html and eruby attribute is supported, for eg:

<%= graduation-cap "graduation-cap", class: "text-gray-500", aria: { label: "user-icon" } %>

Handling the size of the icon

Normally, if you're just using vanilla iowaicon with Tailwind CSS, you'd add w-5 h-5 as classes on the svg element. With rails_iowaicon, you just need to set the size attribute on the helper method.

<%= iowaicon "user", size: 20 %>

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

rails_iowaicon automatically sets aria-hidden="true" if aria-label is not set, and if aria-label is set, then role="img" is set.

Tooltip

You can provide tooltips on hover if you pass in a title option. Anything passed into the title option will be rendered inside of a <title> tag within the rendered SVG, which modern browsers will lean on to display a tooltip on hover.

Development

• Clone the repo
• Run bundle install, or run ./bin/setup
• Run bundle exec rake to run the tests to see if it passing

License

The gem is available as open source under the terms of the MIT License.

Similar projects

• rails_heroiconRuby on Rails views helper method for rendering heroicons
• rails_feather - Ruby on Rails views helper method for rendering beautiful feather icons.