# `PhoenixStorybook.Components.Icon`
[🔗](https://github.com/phenixdigital/phoenix_storybook/blob/v1.2.0/lib/phoenix_storybook/components/icon.ex#L1)

Unified interface for rendering FontAwesome, HeroIcons, and local icons in Phoenix Storybook.
Supports multiple icon styles and customization through CSS classes.
Main function user_icon/1 handles all providers, with individual provider functions also available.

# `icon_provider`

```elixir
@type icon_provider() :: :fa | :hero | :local
```

# `t`

```elixir
@type t() ::
  {icon_provider(), String.t()}
  | {icon_provider(), String.t(), atom()}
  | {icon_provider(), String.t(), atom(), String.t()}
```

# `fa_icon`

FontAwesome icons for internal phoenix_storybook usage.

## Examples

    <.fa_icon name="book" class="text-blue-400"/>
    <.fa_icon name="book" style={:duotone} plan={:pro}/>

## Attributes

* `style` (`:atom`) - One of the styles provided by FontAwesome. Defaults to `:solid`. Must be one of `:solid`, `:regular`, `:light`, `:thin`, `:duotone`, or `:brands`.
* `plan` (`:atom`) (required) - Free plan will make all icons render with solid style. Must be one of `:free`, or `:pro`.
* `name` (`:string`) (required) - The name of the icon, without the fa- prefix.
* `class` (`:any`) - Additional CSS classes. Defaults to `nil`.
* `class_list` (`:list`) - Additional CSS classes. Defaults to `[]`.
* Global attributes are accepted. Any HTML attribute.

# `hero_icon`

HeroIcons icons for internal phoenix_storybook usage. Requires :heroicons as a mix dependency.

## Examples

    <.hero_icon name="cake" class="w-2 h-2"/>
    <.hero_icon name="cake" style={:mini}/>

## Attributes

* `style` (`:atom`) - One of the styles provided by HeroIcons. Defaults to `:outline`. Must be one of `:outline`, `:solid`, or `:mini`.
* `name` (`:string`) (required) - The name of the icon.
* `class` (`:any`) - Additional CSS classes. Defaults to `nil`.
* `class_list` (`:list`) - Additional CSS classes. Defaults to `[]`.
* Global attributes are accepted. Any HTML attribute.

# `local_icon`

Local icons for internal phoenix_storybook usage.

## Examples

    <.local_icon name="hero-cake" />
    <.local_icon name="hero-cake" class="text-blue-400"/>

## Attributes

* `class` (`:any`) - Additional CSS classes. Defaults to `nil`.
* `name` (`:string`) (required) - The name of the icon, without the fa- prefix.
* Global attributes are accepted. Any HTML attribute.

# `user_icon`

Icons defined by storybook users.
Icon can use different providers: FontAwesome (:fa) and HeroIcons (:hero) are supported.

## Examples

    <.user_icon icon={:fa, "book"}/>
    <.user_icon icon={:fa, "book", :thin}/>
    <.user_icon icon={:fa, "book", :duotone, "fa-fw"} class="text-indigo-400"/>
    <.user_icon icon={:hero, "cake"}/>
    <.user_icon icon={:hero, "cake", :mini}/>
    <.user_icon icon={:hero, "cake", :mini, "w-2 h-2"} class="text-indigo-400"/>
    <.user_icon icon={:local, "hero-cake"}/>
    <.user_icon icon={:local, "hero-cake-mini", "w-2 h-2"} class="text-indigo-400"/>

## Attributes

* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* `fa_plan` (`:atom`) (required) - Free plan will make all icons render with solid style. Must be one of `:free`, or `:pro`.
* `icon` (`:any`) (required) - Icon config, a tuple of 2 to 4 items: {provider, icon, style, classes}.
  3 items tuple for local icons: {:local, icon, classes}.
 Examples include `{:fa, "book"}`, `{:fa, "book", :thin}`, `{:fa, "book", :duotone, "fa-fw"}`, `{:hero, "cake", :solid, "w-2 h-2"}`, `{:local, "hero-cake"}`, and `{:local, "hero-cake-mini", "w-2 h-2"}`.
* Global attributes are accepted. Any HTML attribute.

---

*Consult [api-reference.md](api-reference.md) for complete listing*