Generated CSS file not imported

[tanguilp]

Hi,

I've followed the instruction with

mix.exs

{:iconify_ex, "~> 0.4.0"}

A CSS file is generated with the icons in assets/static/images/icons/icons.css:

[iconify="carbon:restaurant-fine"]{--Iy:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' d='M30 11V3a1 1 0 0 0-1-1H19a1 1 0 0 0-1 1v8a6.004 6.004 0 0 0 5 5.91V28h-4v2h10v-2h-4V16.91A6.004 6.004 0 0 0 30 11m-10 0V4h8v7a4 4 0 1 1-8 0m-8-9v9.02a3.964 3.964 0 0 1-3.96 3.96A4.005 4.005 0 0 1 4 11.02V2H2v9.02a5.989 5.989 0 0 0 5 5.865V30h2V16.895a5.965 5.965 0 0 0 5-5.875V2z'/%3E%3Cpath fill='currentColor' d='M7 2h2v9.98H7z'/%3E%3C/svg%3E");-webkit-mask-image:var(--Iy);mask-image:var(--Iy)}
[iconify="heroicons-solid:collection"]{--Iy:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M7 3a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2zM4 7a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m-2 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--Iy);mask-image:var(--Iy)}

and the icon seems to be generated normally:

<div iconify="heroicons-solid:collection" class="w-16 h-16" aria-hidden="true" data-phx-id="m17-phx-F8Xj-x7Y-Moq9gAD"></div>

However, this file is neither imported nor downloaded (network inspector doesn't show anything) and the icon is not displayed. Have I missed something?

[mayel]

Ah there may be a step missing from the docs, you need to include something like this in your template: <link phx-track-static rel='stylesheet' href='#{static_path("/images/icons/icons.css")}'/>

[tanguilp]

Thanks for your response, and the great work!

In recent versions of Phoenix, Plug.Static is configured as followed:

  # Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phx.digest
  # when deploying your static files in production.
  plug Plug.Static,
    at: "/",
    from: :voyagee,
    gzip: false,
    only: VoyageeWeb.static_paths()

Files are served from priv directory. However, icons.css is generated in assets/static/images/icons/icons.css.

Not sure how to have the file copied in the priv directory :thinking: I think this is something new in Phoenix, before static files were taken from the assets directory.

[mayel]

Ah yeah would have to check how recent versions of the phoenix generator set it up (using esbuild?), in my project anything in assets/static/ is copied to priv/static/ but our asset pipeline has evolved into something quite bespoke...

[mayel]

You could also change the output path: config :iconify_ex, generated_icon_static_path: "/priv/static/images/icons/"

[tanguilp]

Works, thanks! No time to update the doc unfortunately :/

[tanguilp]

BTW mode: :img doesn't work neither