PhoenixStorybook.Components.Icon (phoenix_storybook v0.9.3)

View Source

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.

Summary

Types

icon_provider()
t()

Functions

fa_icon(assigns)

FontAwesome icons for internal phoenix_storybook usage.

hero_icon(assigns)

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

local_icon(assigns)

Local icons for internal phoenix_storybook usage.

user_icon(assigns)

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

Types

icon_provider()

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

t()

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

Functions

fa_icon(assigns)

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(assigns)

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(assigns)

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(assigns)

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.