ZoonkWeb.Components.Icon (Zoonk v0.1.0-dev)
View SourceProvides the UI for rendering icons.
Summary
Functions
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 tonil
.
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 tonil
.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 tonil
.