Phoenix 1.7.1 - thank you for making Heroicons CSS-enabled

Phoenix Forum Chat / Discussions
,
21

oh I think its everywhere because of hexcode colorcode, see for example


.hero-exclamation-circle-solid {
  --hero-exclamation-circle-solid: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM12 8.25C12.4142 8.25 12.75 8.58579 12.75 9V12.75C12.75 13.1642 12.4142 13.5 12 13.5C11.5858 13.5 11.25 13.1642 11.25 12.75V9C11.25 8.58579 11.5858 8.25 12 8.25ZM12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75C12.75 15.3358 12.4142 15 12 15C11.5858 15 11.25 15.3358 11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5Z" fill="#0F172A"/></svg>');
  -webkit-mask: var(--hero-exclamation-circle-solid);
  mask: var(--hero-exclamation-circle-solid);
  background-color: currentColor;
  vertical-align: middle;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
}

Refer fill="#0F172A". The SVG is passed as mask-image URL to apply this svg.

22

ok thanks, let me try that.

23

We must be working with different heroicon sources then

24

I wanted to ask even that. Is there an official way to pull these icons, like some sort of mix task? I pulled the gitlab repo of heroicons and copied the src/ content into the assets/heroicons folder. Is there any better way you can refer?

Sample from the heroicon gitlab repo

Regards

25

I see now. I think during release they actually substitutes colors with a generic approach. Phoenix has its script to pull icons by version. See here:

image

26

ok, so what’s really afoot here is that I did not use the latest Phoenix installer. Think I have my answers now. Thanks.