Icons

Why SVG icons?

There are a lot of pros to using SVG icons rather than bitmap or font-based icons. The summarized take is they are more accessible, have lighter file sizes, and can scale infinitely, which is excellent for retina screens.

The main downside is the way we have to render them in order to have more control. SVGs are essentially vector code and can be complex and cumbersome to drop into a new view whenever you require one. Because of this we bundled another gem called railsui_icon into Rails UI that solves for icons.

Dependencies

railsui_icon contains all of heroicons.com with plans to expand. The gem is already included as a dependency for each Rails UI installation.

Options

• :variant — Pass a style of icon you would like to render. (Defaults to :outline. Options include :outline,:solid, :micro, and :mini).
• :class — Add CSS classes here. stroke-current and stroke-fill are appended by default based on the :variant option.
• :custom_path — Pass a custom path to an icon. Treat paths as relative. A forward slash prefix is required: /icon_name.svg.

Usage

Using and rendering a new icon is quite simple and doesn't pollute your markup. The default style is outline but you can render different variants as necessary.

<%= icon "academic-cap", class: "w-5 h-5 text-indigo-600" %>

Custom icons

Need to add some of your own icons? You can add those to app/assets/images.

If you require something more custom, use the custom_path option to pass a unique path to the helper for rendering. Treat paths as relative. A forward slash prefix is required: /icon_name.svg.

<%= icon "eye-close", custom_path: "/eye-close.svg", class: "w-10 h-10 stroke-current text-pink-400" %>