Hex package for Heroicons used in default Phoenix apps

Phoenix Forum Proposals/Suggestions
, , ,
1

Hi there :wave:,
I hope everyone is doing well…

Tl;Dr: Is there a use case to have Heroicons from an actual hex.pm package instead of Github?

Right now, Heroicons is integrated in Phoenix in the following way:

  • A github: dependency, which really only downloads Heroicons assets in the deps folder
    {:heroicons,
 github: "tailwindlabs/heroicons",
 tag: "v2.1.1",
 sparse: "optimized",
 app: false,
 compile: false,
 depth: 1},
  • A Tailwind config file, instructed to read the files from the deps folder:
    plugin(function ({ matchComponents, theme }) {
  let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
  let values = {}
  let icons = [
    ["", "/24/outline"],
    ["-solid", "/24/solid"],
    ["-mini", "/20/solid"],
    ["-micro", "/16/solid"]
  ]

So far so good…

However, I had two use cases where this was not ideal:

  • in one project using github dependency broke the CI as it needs git installed on the Elixir runner… Okay it was fairly easy to fix… Just install git…
  • It’s not possible to update easily using Renovate for example (depandabot like tool).

So these two reasons are the incentives for me to make a package that will just do the same thing… I.e. to only import the assets into the deps folder.
This is done by leveraging the files: config option for the package: property of the package.

Then, it’ll be imported as a regular Hex dep:

{:heroicons_css, "~> 0.0.1", compile: false, app: false},

And still used the exact same way as it’s currently.

I was thinking to have this dep’s version in sync with the original github repo. e.g as of now:

{:heroicons_css, "~> 2.1.3", compile: false, app: false},

Also the sync will be entirely automated by CI…
From a repo forked from the original Tailwindlabs repo, added with the mix.exs file to configure the package.

What do you think?

Note:
Maybe, I should have asked this first…
But Tailwind 4 is around the corner: Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS
It seems a config file will no longer be needed.
And I was wondering if in our Phoenix’s use case (using Tailwind with the CLI) https://tailwindcss.com/blog/tailwindcss-v4-alpha#using-the-cli
it’ll still be possible to use the plugin() function?

2 Likes
2

For other readers’ convenience, there is an issue for this insofar it concerns Dependabot.

3 Likes
3

Update on the Heroicons package and Dependabot which seems to work:

The comment:

After the latest updates to elixir version for dependabot, this issue is no longer happening for me.
Apparently fixed.

I do get dependabot to open new pull request for new version of heroicons.