Components Heroicons

Heroicons

The makers of Tailwind CSS have created a libary of 230 beatiful hand-crafted SVG icons and we have made it incredibly simple for you to use them. Search the full list of these icons here.

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.

We renamed Heroicons
As of v0.18, we have renamed Heroicons to HeroiconsV1.

To use Heroicons v2, use this library:
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" />