Components
Heroicons (old)
Heroicons (older)
Petal Components 2.0+ now work with Core Components
Click here for the latest documentation
Petal Components 1.9.3 and older
To use Heroicons, please follow the docs of
heroicons_elixir
(this library comes automatically loaded with Petal Components) or use our
icon
component below for a dynamic icon.
Icon (Heroicons v2)
The Heroicons Hex library doesn't allow you to dynamically create an icon. This component rectifies that.
<.icon name={:home} class="h-10 text-gray-700 dark:text-gray-300"/>
<.icon name={:academic_cap} class="h-10 text-pink-700 dark:text-pink-300"/>
<.icon name={:adjustments_horizontal} class="h-10 text-green-700 dark:text-green-300"/>
Properties
# <.icon>
attr :name, :atom, required: true
attr :outline, :boolean, default: true
attr :solid, :boolean, default: false
attr :mini, :boolean, default: false
attr :rest, :global,
doc: "Forwarded to the Heroicon function component. Can include fill, stroke, stroke-width"
Solid (v1)
<HeroiconsV1.Solid.home />
<HeroiconsV1.Solid.academic_cap class="w-6 h-6 text-primary-500" />
<HeroiconsV1.Solid.chart_pie class="w-6 h-6 rotate-90 text-secondary-500" />
Outline (v1)
<HeroiconsV1.Outline.home />
<HeroiconsV1.Outline.academic_cap class="w-6 h-6 text-primary-500" />
<HeroiconsV1.Outline.chart_pie class="w-6 h-6 rotate-90 text-secondary-500" />