solop

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

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

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

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

Where Next?

Popular in Questions Top

vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New

Other popular topics Top

grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 54006 488
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 31494 112
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

We're in Beta

About us Mission Statement