solop

solop

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?

Showing Posts 1 to 4

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" />

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"]} />

solop

solop OP

Thanks, that is helpful :slight_smile:

solop

solop OP

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
— All posts loaded —

Where Next? Top

Trending in Questions Top

katta
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
achenet
Hello, I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind. However, when I launch mix phx.server, I get an error...
New
kpanic
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
mnkhod
So i have been using ash framework for a while and i love it. However currently the issue im having with ash framework is the error handl...
New

Other Trending Topics Top

GenericJam
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
budgie
A little off-topic, but I feel like people here have a good head on their shoulders. I used to be quite good at making software. Was luc...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews