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