Icon

The Mishka Chelekom icon is a small Phoenix LiveView function component that draws a Heroicon by name. It renders one empty span whose class is the icon name, and the Heroicons Tailwind plugin of your project turns that class into the icon. The classes come from the plugin that mix phx.new adds to a new project, together with the heroicons dependency.

Because the icon is a plain element, it takes its color from the text color and its size from Tailwind classes. Other Chelekom components call it for their own icons, so the generator adds it to your project with the first component that needs it. You can also generate it alone with mix mishka.ui.gen.component icon and call it in your own templates.

<.icon name="hero-home" class="size-6" />
<.icon name="hero-envelope" class="size-6" />
<.icon name="hero-user" class="size-6" />
<.icon name="hero-cog-6-tooth" class="size-6" />
<.icon name="hero-bell" class="size-6" />

The name prop is required and must start with hero-. The rest is the name of the icon on heroicons.com, for example hero-home or hero-arrow-path. A name that does not start with hero- matches no function clause and raises a FunctionClauseError.

<.icon name="hero-home" />
<.icon name="hero-arrow-path" />
<.icon name="hero-inbox" />

Heroicons come in four styles, and a suffix on the name picks one. The plain name is the 24px outline style. -solid is the 24px solid style, -mini is the 20px solid style and -micro is the 16px solid style. The plugin sets the size that goes with each style, which is 1.5rem for the first two, 1.25rem for mini and 1rem for micro.

<.icon name="hero-star" />
<.icon name="hero-star-solid" />
<.icon name="hero-star-mini" />
<.icon name="hero-star-micro" />

The class prop adds Tailwind classes to the span. Set the size with size-*, or with w-* and h-* classes. The icon is square, so one size-* class is enough.

<.icon name="hero-bell" class="size-4" />
<.icon name="hero-bell" class="size-5" />
<.icon name="hero-bell" class="size-6" />
<.icon name="hero-bell" class="size-8" />
<.icon name="hero-bell" class="size-10" />
<.icon name="hero-bell" class="size-12" />

The plugin draws the icon with currentColor, so an icon has the color of the text around it. A text color class on the icon changes only that icon.

<.icon name="hero-heart-solid" class="size-8 text-red-700" />
<.icon name="hero-heart-solid" class="size-8 text-blue-600" />
<.icon name="hero-heart-solid" class="size-8 text-rose-300" />
<.icon name="hero-heart-solid" class="size-8" />

Any Tailwind animation class works on an icon. animate-spin on hero-arrow-path is the usual loading indicator.

<.icon name="hero-arrow-path" class="size-8 animate-spin" />

The component adds no ARIA attributes. Other attributes pass to the span, so you add them yourself. An icon next to text is decoration, and aria-hidden="true" keeps it away from screen readers. An icon that stands alone needs a name: give it role="img" and an aria-label, or put the label on the button that holds it.

<span class="flex items-center gap-2">
  <.icon name="hero-trash" class="size-5" aria-hidden="true" /> Delete
</span>

<.icon name="hero-trash" class="size-5" role="img" aria-label="Delete" />

Components that draw icons take the Heroicon name as a string and call this component for you. A button takes icon, an item of the breadcrumb takes icon, and the form fields draw the icon of an error message from error_icon. Inside a slot such as start_section of a form field you call the icon component yourself.

<.button icon="hero-bookmark" size="small" variant="default" color="primary">Bookmark</.button>

<.breadcrumb>
  <:item icon="hero-home" link="/docs">Home</:item>
  <:item icon="hero-inbox">Inbox</:item>
</.breadcrumb>

<.text_field name="search" label="Search">
  <:start_section>
    <.icon name="hero-magnifying-glass" class="size-4" />
  </:start_section>
</.text_field>