Components Heroicons (old)

Heroicons (old)

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.

heex 
          <.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
elixir 
            # <.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)
heex 
          <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)
heex 
          <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" />