freedive/lib/liliform/icon.ex
2024-05-16 08:31:40 +05:30

147 lines
3.7 KiB
Elixir

defmodule Liliform.Icon do
@moduledoc """
Bulma icon element.
The icon element is a container for any type of icon font.
Because the icons can take a few seconds to load,
and because you want control over the space
the icons will take, you can use the icon class
as a reliable square container that will prevent
the page to "jump" on page load.
By default, the icon container will take up
exactly 1.5rem x 1.5rem.
The icon itself is sized accordingly to the icon library you're using.
For example, Font Awesome 5 icons will inherit the font size.
"""
use Liliform.Component
alias Liliform.Colorhash
alias Freedive.Features
@doc """
Renders an icon.
## For
The icon name is set using the `for` attribute.
## Color
Set color to `auto` to automatically choose/generate color
based on the icon name.
You can also set the color to any valid CSS color value.
## Size
The icon size can be set using the `size` attribute.
By default, the size is set to `1.5rem`.
Example:
<.icon for="home" />
<.icon for="info" color="auto" />
<.icon for="alert" color="#f44" />
<.icon for="settings" color="blue" />
<.icon for="error" color="hsl(0, 100%, 50%)" />
<.icon for="info" size="2rem" />
"""
attr :for, :string, required: true, doc: "icon name"
attr :size, :string, default: nil, doc: "size of icon"
attr :color, :string, default: nil, doc: "color of icon"
attr :class, :string, default: "", doc: "additional classes"
attr :rest, :global
slot :inner_block, required: false
def icon(assigns) do
assigns =
assigns
|> set_bulma_classes()
assigns =
if assigns.size != nil do
Map.put(assigns, :style, "width: #{assigns.size}; height: #{assigns.size};")
else
assigns
end
~H"""
<span class="icon-text">
<span class={["icon", @class]} {@rest}>
<.icon_svg for={@for} height={@size} width={@size} {icon_color(assigns)} />
</span>
<%= if @inner_block != [] do %>
<span>
<%= render_slot(@inner_block) %>
</span>
<% end %>
</span>
"""
end
defp icon_svg(assigns) do
base_assigns =
assigns
|> Map.reject(fn {k, _} -> k in [:for, :size, :rest] end)
|> Map.reject(fn {k, v} -> k in [:color] and v == "" end)
apply(Lucideicons, icon_name(assigns), [base_assigns])
end
defp icon_color(assigns) do
if Features.enabled?(:colorhash) do
color =
case assigns.color do
nil -> ""
"auto" -> Colorhash.hsl(assigns.for)
color -> color
end
case assigns.for do
"alert" -> [class: "has-text-danger"]
"info" -> [class: "has-text-info"]
"success" -> [class: "has-text-success"]
"warning" -> [class: "has-text-warning"]
"error" -> [class: "has-text-danger"]
"all" -> [color: "magenta"]
"compute" -> [color: "blue"]
"storage" -> [color: "green"]
"network" -> [color: "orange"]
"system" -> [color: "purple"]
"account" -> [color: "darkblue"]
_ -> [color: color]
end
else
[class: "has-text-dark"]
end
end
defp icon_name(assigns) do
name =
assigns.for
|> String.trim()
|> String.downcase()
|> String.replace("-", "_")
case name do
"alert" -> :triangle_alert
"compute" -> :binary
"storage" -> :hard_drive
"network" -> :earth
"system" -> :bot
"account" -> :user
"all" -> :infinity
"pf" -> :shield
"sshd" -> :lock
"ntpdate" -> :clock
"httpd" -> :globe
"running" -> :circle_play
"enabled" -> :circle_check
lucide_name -> String.to_atom(lucide_name)
end
end
end