Phlex::Icons gem

[AliOsm]

Hello everyone,

I've been migrating one of my projects to Phlex/PhlexUI over the past two weeks and realized I frequently use SVG icons from various sources like Heroicons, Bootstrap icons, and Flag icons. Instead of manually integrating these icons into a Shared::Icon component, I thought, why not build a gem that offers easy-to-use Phlex components for these popular icon packs?

Initially, I came across the phlex-heroicons gem, which provides Phlex components for Heroicons. It was exactly what I needed but only for Heroicons.

So, I decided to create the phlex-icons gem. This gem generates Phlex components for icons from multiple sources automatically using the phlexing gem. Currently, phlex-icons includes over 4,000 icons from four different sources:

1. Heroicons (300+)
2. Lucide icons (1,500+)
3. Bootstrap icons (2,000+)
4. Flag icons (250+)

The goal of phlex-icons is to provide developers with a centralized, easy-to-integrate solution for incorporating a wide range of icons into their Phlex/PhlexUI projects. By automating the generation of icon components, this gem can save a significant amount of time and effort.

As a next step, I'm planning to set up a GitHub Actions workflow to automatically update the icon packs weekly, ensuring that users always have access to the latest icons.

I'd love to hear your thoughts on this project! Are there other icon packs you’d like to see included? Any features or improvements you think would be valuable? Please feel free to try out the gem, share your feedback, and contribute to its development.

Thank you!

[joeldrapper]

This is awesome. I opened a couple of issues with some ideas.

I would be awesome if each icon pack was a Phlex::Kit. It would allow you to use it like this

class PhlexIcons < Phlex::HTML
  include Phlex::Icons

  def view_template
    div do
      Hero::Home(variant: :solid, classes: 'size-4')
      Lucide::House(classes: 'size-4')
      Bootstrap::House(classes: 'size-4')
      Flag::Sa(variant: :rectangle, classes: 'size-4')
    end
  end
end

[AliOsm]

I will look into the issues and Phlex::Kit.
One question, the logs shows that Phlex::Kit could be removed in future, will it be removed?

[joeldrapper]

It will not be removed. You may want to hold off on using it though until we remove that annoying warning.

[AliOsm]

Nope, I trust you, I already moved to Phlex 😂

[AliOsm]

@joeldrapper Am I using Phlex::Kit correctly in this PR? I followed phlex-lucide gem, as I didn't find documentation for Phlex::Kit.

[joeldrapper]

Yes, looks good!

[danieldocki]

A great idea, a few days ago I published an exclusive gem phlex-remixicon of RemixIcon, would it be possible to add it to your gem too?

[AliOsm]

Sure! I will work on RemixIcon pack in the next few days. Also, I will borrow the lazy loading implementation from your gem, so forgive me :3

[AliOsm]

@danieldocki Remix icons are available now 🎉

Could you please put any inputs (if you have any) on these 2 PR:

• Lazy loading AliOsm/phlex-icons#6
• Make each icon pack a Phlex::Kit AliOsm/phlex-icons#9

[danieldocki]

It's ok for me, good job

[AliOsm]

If you don't like the all in one solution for any reason, phlex-icons is now available as a separate gem per icon pack, you just need to append -{icon pack name} to the gem name and you will get it (e.g. phlex-icons-lucide) 🎉