58 lines
2.3 KiB
Elixir
58 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
|