allanegidio
Icon component from core components
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?
Marked As Solved
mindok
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>
"""
Also Liked
100phlecs
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"