Problem with loading of heroicons

[rakso-startkoden]

Due to the slight difference in how heroicons are being loaded compared to how phoenix 1.7 suggest I'm having problems using petal_components with other libraries that also require heroicons.

Pheonix default https://github.com/phoenixframework/phoenix/blob/main/installer/templates/phx_single/mix.exs suggest doing this.

{:heroicons,
       github: "tailwindlabs/heroicons",
       tag: "v2.1.1",
       sparse: "optimized",
       app: false,
       compile: false,
       depth: 1}

And a recent update in the backpex library changes it to do the same https://github.com/naymspace/backpex/blob/develop/guides/get_started/installation.md#track-the-heroicons-github-repository.

This now causes issues for me becase If i add the heroicons in a similar way as petal_components suggest

{:heroicons, "~> 0.5.3"}

it does not work for reasons I can't understand. And if i override the phoenix default way it causes petal_component to crash on start.

Is there anyone that have similar issue, or is there a way to configure this so that both libraries work together?

[CharlesIrvineKC]

Yes, same problem here.

[mitkins]

I'm in the process of investigating this.

The dependency that's generated by Phoenix pulls directly from the tailwindlabs/heroicons GitHub repo. It just happens to have the same name as the heroicons package.

A workaround for now is to rename the dependency created by Phoenix. E.g.:

{:core_heroicons,
  github: "tailwindlabs/heroicons",
  tag: "v2.1.5",
  app: false,
  compile: false,
  sparse: "optimized"},

To keep the above dependency functional, you'll need to update assets/tailwind.config.js:

plugin(function({matchComponents, theme}) {
  let iconsDir = path.join(__dirname, "../deps/core_heroicons/optimized")
  ...
}

Finally, the core components <.icon /> function component will be overridden by the Petal Component version (depending on where you put use PetalComponents). If you want to use the core components version, you might have to rename the function in lib/hello_web/components/core_components.ex:

  def core_icon(%{name: "hero-" <> _} = assigns) do
    ~H"""
    <span class={[@name, @class]} />
    """
  end

Then the dependencies won't clash and the :heroicons in the Petal Component library will continue to work as they always have. Of course, this means that there will be a double up of heroicons - but only if you use both versions.

[mitkins]

Actually, when you use the function supplied by core_components.ex, you have to pass up a string to :name with a "hero-" prefix. The Petal Components version expects an atom