59 lines
2.3 KiB
Elixir
59 lines
2.3 KiB
Elixir
|
defmodule ComfycampWeb.Icons do
|
|||
|
|
@moduledoc """
|
|||
|
|
Provides reusable svg icons.
|
|||
|
|
|
|||
|
|
I would like to store icons as .svg files,
|
|||
|
|
but I don’t want to write a custom loader.
|
|||
|
|
|
|||
|
|
When trying to use the img element, we lose the ability to inherit color.
|
|||
|
|
|
|||
|
|
For now, I find this approach tolerable.
|
|||
|
|
"""
|
|||
|
|
use Phoenix.Component
|
|||
|
|
|
|||
|
|
@doc """
|
|||
|
|
Icon component.
|
|||
|
|
|
|||
|
|
The default icon is face-frown from heroicons.
|
|||
|
|
|
|||
|
|
## Examples
|
|||
|
|
|
|||
|
|
<.icon name="hero-x-mark-solid" />
|
|||
|
|
<.icon name="hero-arrow-path" class="custom-class" />
|
|||
|
|
"""
|
|||
|
|
attr :name, :string, required: true
|
|||
|
|
attr :class, :string, default: nil
|
|||
|
|
|
|||
|
|
def icon(%{name: "hero-exclamation-circle"} = assigns) do
|
|||
|
|
~H"""
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={["icon", @class]}>
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
|
|||
|
|
</svg>
|
|||
|
|
"""
|
|||
|
|
end
|
|||
|
|
|
|||
|
|
def icon(%{name: "hero-information-circle"} = assigns) do
|
|||
|
|
~H"""
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={["icon", @class]}>
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|||
|
|
</svg>
|
|||
|
|
"""
|
|||
|
|
end
|
|||
|
|
|
|||
|
|
def icon(%{name: "hero-x-mark"} = assigns) do
|
|||
|
|
~H"""
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={["icon", @class]}>
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|||
|
|
</svg>
|
|||
|
|
"""
|
|||
|
|
end
|
|||
|
|
|
|||
|
|
def icon(assigns) do
|
|||
|
|
~H"""
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={["icon", @class]}>
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
|
|||
|
|
</svg>
|
|||
|
|
"""
|
|||
|
|
end
|
|||
|
|
end
|