ZoonkWeb.Components.Icon (Zoonk v0.1.0-dev)

View Source

Provides the UI for rendering icons.

Summary

Functions

Renders a dynamic icon.

Functions

dynamic_icon(assigns)

Renders a dynamic icon.

<.icon /> only allows us to render icons at compile time.

Sometimes we need to dynamically load icons based on user input or other runtime data like AI's recommendations.

We can use this component to load icons dynamically.

Examples

<.dynamic_icon name="tabler-x" />
<.dynamic_icon name="tabler-refresh" />

Attributes

  • name (:string) (required)
  • variant (:atom) - Defaults to :outline. Must be one of :outline, or :filled.
  • default (:string) (required) - Default icon name to use if the icon is not found.
  • class (:any) - Defaults to nil.

icon(assigns)

Renders a Tabler Icon.

Icons are extracted from the deps/tabler_icons directory and bundled within your compiled app.css by the plugin in your assets/tailwind.config.js.

Examples

<.icon name="tabler-x" />
<.icon name="tabler-refresh"  />

Attributes

  • name (:string) (required) - Icon name, e.g. tabler-x.
  • class (:any) - Additional CSS classes to apply to the icon. Defaults to nil.
  • size (:atom) - Icon size, e.g. :sm, :md, :lg. Defaults to :sm. Must be one of :xs, :sm, :md, or :lg.
  • label (:string) - Accessible label for the icon. Defaults to nil.