Introducing Icons: Add any icon library to your Ruby app
Almost two years ago I announced Rails Icons. I started that article with the notion I have no app where I do not use icons. That is still true today.
I also still use Rails for all my SaaS’ apps, but what if you do not? What if you use one of the many other amazing Ruby frameworks, like Hanami, Rodauth or maybe Padrino? Or what if instead of Perron (a Rails-based SSG), you use Jekyll, Middleman or Bridgetown?
You cannot use the elegant way of adding SVG icons, of any of the small dozen icon libraries, in your app or site. Sad! 😞
So, ~210k downloads later, I extracted the core (Ruby) part from Rails Icons into its own gem: Icons. ⭐
So now Rails Icons core features rely on the Icons gem and only the Rails-specific parts (helper and generators) live in the Rails Icons gem itself, all while the usage of Rails Icons remains as it was.
This new set up allows you to either build your own layer, like Rails Icons, around Icons and package it into a gem or use it directly in your Ruby app.
For the latter it will look like this:
# Sync any of the supported libraries from their respective (GitHub) repository
Icons::Sync.new("lucide").now
# And then to render an icon
icon = Icons::Icon.new(name: "check", library: "lucide", variant: "outline", arguments: { class: "text-gray-500" })
svg = icon.svg
If you want to build a layer around the Icons gem for the framework or SSG (if you still not use Perron 😅), do reach out; I am happy to help.
You can find the source of Icons gem on GitHub. ⭐
Want to read me more?
-
Free Icon Libraries for Rails Apps
A list of the most popular, free icon libraries you can use in your Ruby on Rails app. -
Rails Icons 1.0.0 is here
You don't need JavaScript for many modern UI components. The accordion is a classic example. Let's explore how it's done. -
Introducing Rails Icons: One Gem to Rule Them All
Enhance your web app's user experience with Rails Icons, the open-source gem from Rails Designer that simplifies SVG icon integration. Easily add, customize and mix icons from various libraries like Heroicons and SimpleIcons to improve navigation and aesthetic appeal.
Over to you…
What did you like about this article? Learned something knew? Found something is missing or even broken? 🫣 Let me (and others) know!
Comments are powered by Chirp Form
{{comment}}