Icon component from core components

Questions / Help
1

Howdy

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?

2

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

1 Like
3

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:

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