PhoenixStorybook.Components.Icon (phoenix_storybook v0.9.1)
View SourceUnified 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
Functions
FontAwesome icons for internal phoenix_storybook usage.
HeroIcons icons for internal phoenix_storybook usage. Requires :heroicons as a mix dependency.
Local icons for internal phoenix_storybook usage.
Icons defined by storybook users. Icon can use different providers: FontAwesome (:fa) and HeroIcons (:hero) are supported.
Types
@type icon_provider() :: :fa | :hero | :local
@type t() :: {icon_provider(), String.t()} | {icon_provider(), String.t(), atom()} | {icon_provider(), String.t(), atom(), String.t()}
Functions
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 tonil
.class_list
(:list
) - Additional CSS classes. Defaults to[]
.- Global attributes are accepted. Any HTML attribute.
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 tonil
.class_list
(:list
) - Additional CSS classes. Defaults to[]
.- Global attributes are accepted. Any HTML attribute.
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 tonil
.name
(:string
) (required) - The name of the icon, without the fa- prefix.- Global attributes are accepted. Any HTML attribute.
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 tonil
.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.