Mishka
Chelekom

Theme Icon

v0.0.10

v0.0.10StableHeadlessStatelessAccessibleApache-2.0
Installation mix mishka.ui.gen.headless theme_icon
Source View Source

Overview of the Phoenix and LiveView Headless Theme Icon Component

The Mishka Chelekom Headless Theme Icon is a Phoenix function component that wraps an icon in a span. It is the box you size, color and round to hold an icon, such as a status marker next to a row in a LiveView list. The component ships no styling, so the size, color, shape and the icon itself come from your classes and the content you pass in.

It is decorative by default and renders aria-hidden="true". Pass label when the icon carries meaning on its own, and it becomes role="img" with that text as its aria-label. The only styling hook is class.

Base UI Theme Icon example - icons in colored containers (Phoenix headless)

Base UI Theme Icon example - icons in colored containers (Phoenix headless)

heex
<div class="flex items-center gap-3">
  <.theme_icon
    label="Success"
    class="inline-flex size-9 items-center justify-center rounded-lg bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="size-5"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
    </svg>
  </.theme_icon>
  <.theme_icon class="inline-flex size-9 items-center justify-center rounded-full bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
      <path d="M11.983 1.907a.75.75 0 0 0-1.292-.657l-8.5 9.5A.75.75 0 0 0 2.75 12h6.572l-1.305 6.093a.75.75 0 0 0 1.292.657l8.5-9.5A.75.75 0 0 0 18.25 8h-6.572l1.305-6.093Z" />
    </svg>
  </.theme_icon>
</div>

Attributes

id is optional. label is the accessible name. Leave it out for an icon that sits next to visible text, and set it for an icon that stands alone, like the check mark above. class styles the span. The default slot holds the icon, either an inline SVG or a glyph, and is required. Other HTML attributes, such as data-* or title, pass through to the span.

Accessibility

A labelled icon is exposed as an image with the label as its name. An unlabelled one is hidden from assistive technology, so it never adds noise next to text that already says the same thing. There is no keyboard behavior, because the component is not interactive. For a clickable icon, put the theme icon inside a button or link that has its own accessible name.