Heroicon defined in core_components not working

Phoenix Forum Questions / Help
1

phx is 1.7

Neither of these are working… what am I missing???

<button id="expandButton" class="hero-document-arrow-down"><.icon name="hero-document-arrow-down" /></button>

Other icons work are are available in app.css. But none that I add… I dont get it

2

It’s a bit hard to identify the problem from what you’ve given. If you are pulling in Heroicons via a mix dependency (e.g. {:heroicons, "~> 0.5"}, in your mix.exs) then you would access them via the function components defined in the Heroicons library, e.g.

<button ...> 
  <Heroicons.arrow_right_on_rectangle class="w-6 h-6" />
</button>

Edit: if you are using the default contents of core_components.ex, read the generated docs for the icon function - it explains how the icons are extracted.

1 Like
3

Im not pulling it. icon is defined in core_components… some, and Im not sure why, of the icons are working…

4

Mid air collision - have you read the docs in core_components related to icons?

5

I didnt find much. Link?

Im running core components basically out of the box, w/o modification.

6

<.icon name=“hero-document-arrow-down” class=“w-4 h-4” />
Put this inside your button.

7

This depends on the version of 1.7. Heroicons started as a mix dependency up until 1.7.2 I believe, then it changed to being frontend assets. The dependency version is compiled in and includes every icon, bloating your app a little. You get more flexibility with changing colors and other svg internals though.

8

I forgot to mention that if you don’t specify the dimensions you will not see the icon.

9

I see you’ve solved your problem, though it looks like you might be using the Heroicons package? If you want to use the <.icon /> way, you could try running this inside assets/vendor/heroicons/:

export HERO_VSN="2.1.1" ; \
  curl -L "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HERO_VSN}.tar.gz" | \
  tar -xvz --strip-components=1 heroicons-${HERO_VSN}/optimized
10

It’s in the core_components.ex file in your project. Search for def icon and you’ll find it.

11

Im not using the heroicon lib… I must have accidentally clicked the solution button

12

didnt work. You can see its created the element. But its not visible.

image

13

The element is being added to the page but the CSS is not added to app.css

14

Yes, Id read it

15

You didn’t confirm if you are on at least 1.7.2. If you aren’t this won’t work. If you are, did you try running the command I gave (especially if you upgraded from an earlier 1.7.x)? Otherwise, something else is up as there is no reason this shouldn’t work. You’re gonna have to look in devtools to see if there is anything strange going on.

16

What does your tailwind.config.js look like?

17

1.7.10

18

The issue seems to be that the heex file is defined here: lib/session/gatekeeper/gatekeeper.html.heex and the icons are not being imported. If used else where its taken care of. Any ideas?

19

Its out of the box. No additional definitions.

20

If you look at the complete generated html, is the stylesheet included? I am asking as I have never had a .html.heex outside of the _web folder.