altdsoy

altdsoy

Hex package for Heroicons used in default Phoenix apps

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?

Most Liked

carlgleisner

carlgleisner

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

https://github.com/dependabot/dependabot-core/issues/10186

Last Post!

carlgleisner

carlgleisner

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

https://github.com/dependabot/dependabot-core/issues/10186#issuecomment-2622418484

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.

Where Next?

Popular in Proposals: Ideas Top

alaadahmed
Hi folks, I tried Phoenix 1.7 and it is awesome, but I have small suggestion, which in my opinion will organize files in a better way. ...
New
hst337
Elixir compiler and language specification Purpose of the proposal Elixir language is in mature state and no breaking or heavy changes ar...
New
Aduril
Hello there, Whenever I setup a new project, there is a small function I always add: reply/1. What does it do? In a LiveView mount, han...
New
lessless
Hi, There are a few writeups describing alternative config arrangements by a topic (or an OTP app): Configuring Phoenix apps: Two sma...
New
pinetops
LiveView is by far my favorite web tech, but a few things have been nagging me. So with all the fancy and ill advised elixir tricks I cou...
New
andypearson
Hey all, I have been working on some performance improvements for the Phoenix application I work on. As part of this, through trial and...
New
cevado
I was reading the EEP-79, and thinking about the poor record support in Elixir(i’ve tried to discuss about that in the forum before). I s...
New

Other popular topics Top

grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 54006 488
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 40042 209
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New

We're in Beta

About us Mission Statement