How to use Tabler Icons with Rails

Tabler Icons is a popular icon set with over 4950+ beautiful icons. And it’s MIT licensed!

The icons are distributed in multiple formats - as images, svgs, fonts. While their website does provide extensive support on how to use the icons with many popuplar front end frameworks like React, Vue, Svelte, etc., it’s missing Rails.

While we could just include the webfont file, that’s hosted on a CDN, that should be a non-starter. That’s because we most likely don’t want to use all 4950 icons in our app.

We could try generating a sub-setted icon pack with only the icons we need using a tool like IcoMoon. But that adds complexity and friction in the process if we later want to include another icon that’s not included.

Fortunately, there’s a simpler way. SVGs! There are multiple ways to render an SVG icon - using images (<img> tag), SVG sprites or as inline SVG.

Rendering it as an image or using sprites will make customization harder though, so we’ll stick with inline SVGs. While you can copy & paste the SVG code from their website, that again introduces a bit of friction. Also makes things harder to manage depending on how you do things.

tabler_icons_ruby is a simple gem I created to solve this problem. It includes all the icons in the tabler icon set and just renders them as inline SVGs.

Features

• Using it is pretty simple. You can use any icons from the tabler icon set. It even works on non-rails apps.
• You can easily change the size, colors, stroke width, classes, other HTML attributes when rendering icons if desired.
• It only renders the icons you actually need, so your users avoid the downside of loading unnecessary icons.
• It also removes a bunch of unnecessary things in the SVG that Tabler Icons add that we don’t need (like the xmlns attribute, width/height attributes - if not providing an explicit size, a hidden bounding box)

Installation

Add it to your Gemfile

gem 'tabler_icons_ruby'

If you’re not using bundler/Gemfile, you can also install it directly using

$ gem install tabler_icons_ruby

If you’re not using Rails, also remember to require 'tabler_icons_ruby'.

Usage

If you’re using this with Rails, you can simply use this helper in your views:

<%= tabler_icon('player-play') %>
<%= tabler_icon('player-play', size: '18px', color: '#ff00ff') %>
<%= tabler_icon(:player_play, size: 20, class: 'any-html-class other-class') %>
<%= tabler_icon('2fa', stroke_width: 2, 'data-controller' => 'something') %>

If you’re not using Rails, or you’d like to use the tabler_icon helper from other places, you can simply include the helper in your class:

class SomeClass
  include TablerIconsRuby::Helper

  def call
    "icon: #{tabler_icon('player-play')}"
  end
end

If you don’t like using the helper, you can render icons directly:

TablerIconsRuby.render(
  icon_name,
  size: size_of_icon,
  color: color_of_icon,
  class: html_class_to_add_to_icon,
  stroke_width: stroke_width_of_icon,
  **any_other_attributes_that_will_be_added_to_the_icon_svg_element
)

Preview

Questions/Issues

If you’ve got any questions or issues, feel free to open an issues on the GitHub Repository.

GitHub: tabler_icons_ruby