solop
Replacing content_tag() with core_component function
I want to render an icon based on some kind of params:
defp render_status_icon(case, classes) do
icon_name = case case.status do
:open -> "hero-inbox-solid text-emerald-500"
:closed -> "hero-lock-closed text-gray-500"
:archived -> "hero-archive-box text-gray-500"
_ -> "hero-question-mark-circle text-blue-500"
end
content_tag(:span, class: "#{icon_name} #{classes}") do
end
end
I call it like this in my .heex file:
<%= render_status_icon(case, "h-4 w-4") %>
It works fine, but content_tag is deprecated.
What would be the correct pattern using core_components? It seems i cannot simply call those functions?
Or do I need to create a new Phoenix.Component just to render this?
Or should I use a sigil and simply render <span> myself?
Marked As Solved
Hermanverschooten
I would do something like this:
attr :status, :atom, required: true
attr :classes, :string, default: ""
defp status_icon(%{status: status} = assigns) do
icon_name = case status do
:open -> "hero-inbox-solid text-emerald-500"
:closed -> "hero-lock-closed text-gray-500"
:archived -> "hero-archive-box text-gray-500"
_ -> "hero-question-mark-circle text-blue-500"
end
~H"<span class={[icon_name, @classes]} />"
end
And then use it as:
<.status_icon status={case.status} classes="h-4 w-4" />
Also Liked
Hermanverschooten
Or maybe even simpler, just make the function that returns the icon to use and use that immediately.
<span class={[status_icon(case.status), "w-4 h-4"]} />
Last Post!
solop
As a note for anyone else, this actually will throw a warning of using a local variable (icon_name) in the template. Instead one should put this into the assigns as well:
attr :status, :atom, required: true
attr :class, :string, default: ""
def status_icon(%{status: status} = assigns) do
icon_name = case status do
:open -> "hero-inbox-solid text-emerald-500"
:closed -> "hero-lock-closed text-gray-500"
:archived -> "hero-archive-box text-gray-500"
_ -> "hero-question-mark-circle text-blue-500"
end
assigns = assign(assigns, :icon_name, icon_name)
~H"<span class={[@icon_name, @class]} />"
end
Popular in Questions
Other popular topics
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









