dogweather

dogweather

First, the Hero icon infrastructure in Phoenix is fantastic — thank you for that.

I really like, though, getting as much help from my IDE as possible. And I try to minimize flipping between different screens for docs and translating in my head the third party naming conventions and how my app’s JS / CSS config names things.

So here, I’m brainstorming about ways to check my <.icon> uses at compile-time. There are 1,176 Hero icons, with all four variations.

Currently, I’m leaning towards generating a function for each so that I’d have nice function-name completion while typing. So:

Built-in

<.icon name="hero-plus-mini" />

Idea 1

<.icon_plus_mini />

There’d be 1,176 functions like this.

Idea 2

<.icon_plus kind = :mini />

There’d need to be only 294 functions.
Each would have an optional parameter with a locked-down @type kind :: :mini | :micro | :outline | :solid.

(I haven’t tested this syntax. And I’m thinking dialyzer would be needed to validate the kind argument.)

Idea 3

<.icon name = :plus, kind = :mini />

Have just 1 function that’d accept atoms for args, which would be used in structs, and therefore checked at compile-time.

I think the downside, though, is that the LSP / IDE wouldn’t be able to enumerate all the valid atom inputs in the same way it can enumerate valid function names. So while this would check at compile time, it wouldn’t be as convenient.


Has anyone thought about this?

Here’s an implementation of my first idea:

Summary
defmodule IndexFlowWeb.CoreComponents.IconGenerator do
  @moduledoc """
  Generates individual icon functions for each hero icon at compile time.
  """

  defmacro generate_icon_functions do
    icon_names = load_hero_icon_names()

    functions = for icon_name <- icon_names do
      # Convert "hero-plus-solid" to "icon_plus_solid"
      function_name =
        icon_name
        |> String.replace_prefix("hero-", "icon_")
        |> String.replace("-", "_")
        |> String.to_atom()

            quote do
        @doc """
        Renders the #{unquote(icon_name)} icon.

        ## Examples

            <.#{unquote(function_name)} />
            <.#{unquote(function_name)} class="h-4 w-4" />
        """
        def unquote(function_name)(assigns) do
          assigns = Map.put(assigns, :name, unquote(icon_name))
          icon(assigns)
        end
      end
    end

    {:__block__, [], functions}
  end

    defp load_hero_icon_names do
    # Use the deps directory path directly instead of Application.app_dir
    icons_dir = "deps/heroicons/optimized"

    # Define the mapping of directories to suffixes
    variants = [
      {"24/outline", ""},
      {"24/solid", "-solid"},
      {"20/solid", "-mini"},
      {"16/solid", "-micro"}
    ]

    # Use for comprehension to collect all icons
    for {dir, suffix} <- variants,
        full_path = Path.join(icons_dir, dir),
        File.exists?(full_path),
        file <- File.ls!(full_path),
        String.ends_with?(file, ".svg") do
      base_name = Path.basename(file, ".svg")
      "hero-#{base_name}#{suffix}"
    end
    |> Enum.uniq()
    |> Enum.sort()
  end
end

Showing Posts 1 to 3

cmo

cmo

You limit yourself to just heroicons in a few of those methods. I would add a brand or whatever attribute for future expansion.

I used to generate remix icons functions for the ones I used but migrated to the built-in method. Now I can use either set with the same component and syntax.

ouven

ouven

Hi, we use a semantic mapping in our icon component, like:

%{
faq: {:hero, „help“}
}

for instance.

At compile time we loop over our semantic names and build two functions for each. An icon component and a name function:

def icon_faq(assigns), do: …
def iconname_faq(), do: …

We still have a generic icon component to use inside other components with an icon attribute.

Now we use either the specific icon component or the name function for attributes.

Advantages are:

  • we can have different backends for different icons (hero and feather)
  • we have compile time checking
  • we have IDE support
  • we deliver only the icons we do actually use
  • semantic names are easy to remember

I hope you like some of the ideas.

rhcarvalho

rhcarvalho

If all you want is auto-complete, the Tailwind IntelliSense VSCode extension happily auto-completes the hero- classes for me.

All I had to do was update the config to tell it to auto-complete in an attribute named name (the default is class and className).

If you’re using another editor/IDE, a similar config might be available.

— All posts loaded —

Where Next? Top

Trending in Discussions Top

cblavier
Hey there, It’s been more than a year since we started using LiveView as our main UI library and building a whole library of UI componen...
515 12931 101
New
wmnnd
Hey folks, I wanted to share with you a project I’ve been working on for a while: It’s an Open Source (AGPLv3) newsletter tool. Think Ma...
New
raa-ziq
Hi everyone :waving_hand: I wanted to share something I’ve been building — NowBlind, a random chat app designed to help people discover ...
New
sntran
In my third year of college, around 2010, I found Erlang. A few years later, I found Elixir. I liked the ideas at once: many small proces...
New
Ganna
Hi everyone, I have 8 years of production experience with Erlang/OTP and I’m just starting to get to know Elixir. What would you learn f...
New
gtcode
I’ve been tinkering with Lynx (by José) via hold_ledger. I used AI to write the code, a separate specification, the tests, and the Lean p...
New
AstonJ
A remark @Garrison made… ..has already inspired a thread for the technical side of reclaiming our internet, but there is of course anot...
New

Other Trending Topics Top

dominicletz
Hey there, I haven’t seen a list of useful Elixir specific skills for the popular AI tools yet so I’m starting one here with my first. ...
New
mudasobwa
I fully migrated to my own harness from Anthropic/Gemini and I think it’s time to share it. Welcome DSH, the DeepSeek Harness, fully writ...
New
KristerV
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
New
kip
Localize is the next generation localisation library for Elixir. Think of it as ex_cldr version 3.0. The first version will be released ...
New
OndrejValenta
(I just needed to vent somewhere and LinkedIn is full of hope, or hype, I’m not sure which exactly) AI dream has many faces, but general...
New
webofbits
With AI doing more of the implementation work, I’ve been wondering how much coding I should deliberately keep doing myself. My main conc...
#ai
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews