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-currentandstroke-fillare appended by default based on the:variantoption. -
: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.
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.