Icon component from core components


I’m trying to apply stroke from tailwind classes on a component called icon inside core components.
Unfortunately, it doesn’t change the icon at all because the component is used to render a span tag with a class icon name and not an svg tag.

There is some way to solve it and continue using this component generated by Phoenix?

What I’ve done is navigate to the svg and apply stroke-width=2 as a tag.

1 Like

Hi @allanegidio,

The core components generated by Phoenix are considered a starting point and should be edited to suit your requirements - don’t feel that you should try and leave them as they were when first generated.

However, I usually bypass the core components for icons anyway and bring in the Heroicons dependency :

mix.exs - add Heroicons dependency

{:heroicons, "~> 0.5.3"},

In your templates, render the icon using the components from the dependency:

 Blah blah blah
 <Heroicons.arrow_down_circle class="w-6 h-6" stroke-width="2" />