Expresso.Element.Icon (expresso v0.1.0)

An icon on its own, with a label under it

The first argument names a Lucide icon, such as "rocket", or a name of the icons option of the deck. Expresso.IconTransformer puts the SVG of the icon into the svg field at compile time. The icon takes the color of a role of the theme, and its size is a CSS length.

Without a label, the icon is a decoration, and a screen reader skips it. With a label, the label is the caption of the icon, and a screen reader reads the label.

Summary

Types

t()

The struct of an icon

Functions

colors()

Return the roles that the color option takes

get_assigns(icon)

Make the assigns of the render function from the struct

render(assigns)

Make the HTML of an icon

Types

t()

@type t() :: %Expresso.Element.Icon{
  __spark_metadata__: term(),
  at: term(),
  class: term(),
  color: term(),
  easing: term(),
  effect: term(),
  el: term(),
  label: term(),
  morph: term(),
  name: term(),
  on: term(),
  signature: term(),
  size: term(),
  speed: term(),
  steps: term(),
  svg: term()
}

The struct of an icon

Functions

colors()

@spec colors() :: [atom()]

Return the roles that the color option takes

iex> Expresso.Element.Icon.colors()
[:text, :muted, :accent, :success, :emphasis, :warning, :danger]

get_assigns(icon)

@spec get_assigns(t()) :: map()

Make the assigns of the render function from the struct

The key overlay holds the attributes of the overlay contract, from Expresso.Overlay.Render.attributes/1. The key svg holds the SVG with the ids and the style rules of this copy, from Expresso.SvgCopy.copy/1.

render(assigns)

@spec render(map()) :: Phoenix.HTML.safe()

Make the HTML of an icon

The icon is a figure with the SVG and, with a label, a figcaption.