View Source Custom Icons

You can provide custom sidebar & header icons for your stories. Page stories can also provide iconized navigation tabs.

PhxLiveStorybook gives you the ability to render icons with 2 different providers:

  • FontAwesome which offers a decent set of free icons and a lot of additional styles with paid plans
  • HeroIcons wich offer hundreds of free high quality icons

declaring-an-icon

Declaring an icon

Whenever you provide an icon to the storybook, you should follow the following structure: {:icon_provider, icon_name, :icon_style, additional_css_classes}.

The two last tuple elements are optional.

{:fa, "book"} # note that the FontAwesome icon name omits the fa- prefix
{:fa, "book", :solid} # same than previous one, :solid is the default style
{:fa, "skull", :duotone} # only for FontAwesome paid users
{:fa, "skull", :duotone, "px-2"}
{:hero, "cake"} # for all HeroIcons
{:hero, "cake", :outline} # same than previous one, :outline is the default style
{:hero, "cake", :outline, "w-2 h-2"}

fontawesome-icons

FontAwesome icons

PhxLiveStorybook is built with a very small subset of FontAwesome free icons. If you want to use other FontAwesome icons you need to provide a valid FontAwesome kit id.

It can be either free or paid, so you also need to configure your FontAwesome plan.

# lib/my_app_web/storybook.ex
defmodule MyAppWeb.Storybook do
  use PhxLiveStorybook,
    otp_app: :my_app,
    font_awesome_plan: :pro, # default value is :free
    font_awesome_kit_id: "foo8b41bar4625",
end

heroicons

HeroIcons

PhxLiveStorybook delegates icon rendering to heroicons_elixir. Make sure to add their dependency in your mix.exs file.

defp deps do
  [
    {:heroicons, "~> 0.5.0"}
  ]
end

You can now use whichever HeroIcon icon you want, based on the library function names.