Packages
moon
2.81.1
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/components/icon.ex
defmodule Moon.Icon do
@moduledoc false
use Moon.StatelessComponent
alias MoonIcons.Helpers.Icons
prop(click, :event)
@doc "Additional classes for the <svg> tag"
prop(class, :css_class)
# All the other props below are deprecated!
# Please use only tailwind classes and the class prop
prop(name, :string, required: true, values: Icons.list_all())
prop(color, :string, values: Moon.colors())
prop(background_color, :string, values: Moon.colors())
prop(font_size, :string)
@doc "Id HTML attribute"
prop(id, :string)
@doc "Data-testid attribute value"
prop(testid, :string)
def render(assigns) do
~F"""
<svg
{=@id}
data-testid={@testid}
class={merge([
"moon-icon fill-none",
[
"text-#{@color}": @color,
"bg-#{@background_color}": @background_color,
"text-#{@font_size}": @font_size,
"cursor-pointer": @click
],
@class
])}
:on-click={@click}
style={get_style(color: @color, background_color: @background_color, font_size: @font_size)}
>
<use href={"/moon_icons/svgs/icons_new/#{icon_name_to_filename(@name)}.svg#item"} />
</svg>
"""
end
defp icon_name_to_filename(name) do
name
|> to_string()
|> String.replace("_", "-")
end
end