Skip to content

Add SVG icons from multiple libraries, or your own custom icon set, with this one gem

License

Notifications You must be signed in to change notification settings

Rails-Designer/rails_icons

Repository files navigation

Rails Icons

Embed any library's icon in your Rails app. There are many icon gems for Rails already, but none are library-agnostic. This means you need to pull in other gems or add your logic to display that one specific icon.

The first-party supported icons are stored in a seperate repo: rails_icons_vault. This allows you to pull in only the icon libraries you need, keeping the rails_icons gem lean and lightweight.

Sponsored By Rails Designer

Rails Designer logo

Install

Add this line to your Gemfile:

gem "rails_icons"

And run:

bundle

Sync any of the supported icon libraries from the rails_icons_vault:

rails generate rails_icons:sync heroicons

Usage

# The default library is Heroicons, with "outline" as the default set
icon "check"

# Use another set (options are: outline, solid, mini, micro)
icon "check", set: "solid"

# Add CSS to the icon
icon "check", class: "text-green-500"

# Add data attributes
icon "check", data: { controller: "swap" }

# Tweak the stroke-width
icon "check", stroke_width: 2

Initializer

RailsIcons.configure do |config|
  # Set the default set for the library
  config.default_library = "heroicons"
  config.default_set = "outline"

  config.libraries.heroicons.solid.default.css = "w-6 h-6"
  config.libraries.heroicons.solid.default.data = {}

  config.libraries.heroicons.outline.default.css = "w-6 h-6"
  config.libraries.heroicons.outline.default.stroke_width = "1.5"
  config.libraries.heroicons.outline.default.data = {}

  config.libraries.heroicons.mini.default.css = "w-5 h-5"
  config.libraries.heroicons.mini.default.data = {}

  config.libraries.heroicons.micro.default.css = "w-4 h-4"
  config.libraries.heroicons.micro.default.data = {}
end

Or run rails generate rails_icons:initializer.

Add a custom icon library

RailsIcons.configure do |config|
  # …
  config.libraries.merge!(
    {
      custom: {
        simple_icons: {
          solid: {
            path: "app/assets/svg/simple_icons/solid", # optional: the default lookup path is: `app/assets/svg/#{library_name}/#{set}`
            default: {
              css: "w-6 h-6"
            }
          }
        }
      }
    }
  )
  # …
end

You can now use any svg-icon in the app/assets/svg/simple_icons/solid folder as a first-party icon:

icon "reddit", library: "simple_icons", set: "solid"

License

Rails Icons is released under the MIT License.