PUI.Icon (pui v1.0.0)

Copy Markdown

Provider-backed icons for PUI-owned affordances.

PUI uses semantic icon tokens so its internal controls do not depend on one icon library. The default provider renders Heroicons CSS classes. Configure a host provider with config :pui, :icon_provider, MyApp.PUIIcons when using Lucide, Tabler, or another icon system.

Application-specific icons should normally be rendered by the host application's icon component and passed through component slots.

Examples

<PUI.Icon.icon name={:close} />
<PUI.Icon.icon name={:calendar} class="size-5 text-primary" />

Attributes

NameTypeDefaultDescription
nameatomrequiredPUI semantic icon token
classstring"size-4"Additional icon classes
restglobalGlobal HTML attributes passed to the provider

Summary

Functions

icon(assigns)

Attributes

  • name (:atom) (required) - Must be one of :close, :chevron_down, :chevron_left, :chevron_right, :chevron_up_down, :search, :calendar, :menu, :success, :error, :warning, or :info.
  • class (:string) - Defaults to "size-4".
  • Global attributes are accepted.