This package provides an easy way to use Phosphor icons in your Phoenix.LiveView applications. Many existing Elixir packages are either outdated or take an opinionated, component-based approach; this package instead returns the SVGs from functions so you can use them in your own custom components or directly in EEx/HEEx templates.

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

• 1,248 icons and counting
• 6 weights: Thin, Light, Regular, Bold, Fill, and Duotone
• Designed at 16 x 16px to read well small and scale up big
• Raw stroke information retained to fine-tune the style

You can find the original repo here.

Note: As this lib is dealing with over 9000 icons the compile time may be longer than usual.

Warning: This library only supports phoenix_live_view v1.0+

Add phosphor_icons_ex to the list of dependencies in mix.exs:

def deps do
  [
    {:phosphor_icons_ex, "~> 2.0"}
  ]
end

Then run mix deps.get.

<PhosphorIconsEx.armchair class="h-4 w-4" aria-hidden />

<PhosphorIconsEx.armchair_thin class="h-4 w-4" aria-hidden />
<PhosphorIconsEx.armchair_light class="h-4 w-4" aria-hidden />
<PhosphorIconsEx.armchair_bold class="h-4 w-4" aria-hidden />
<PhosphorIconsEx.armchair_fill class="h-4 w-4" aria-hidden />
<PhosphorIconsEx.armchair_duotone class="h-4 w-4" aria-hidden />

where armchair refers to a specific icon name and the _bold for the specific type.

Icon names can be retrieved from PhosphorIconsEx.icon_names/0 Icons can be searched with PhosphorIconsEx.search_icons/1

defmodule YourIconComponent do
  use Phoenix.Component

  attr :class, :string, default: ""
  attr :icon, :string

  def icon(%{icon: icon} = assigns) do
    assigns = Map.delete(assigns, :icon)

    ~H"""
    {apply(PhosphorIconsEx, String.to_atom(@name), [assigns])}
    """
  end
end

<.icon name="armchair" class="" />

• phosphor for the icons licensed under MIT
• @zoedsoupe which heavily inspired this package with lucide_icons licensed under BSD

This package is not affiliated with Phosphor Icons.

The package version is always in parity with the @phosphor-icons/core version.

This repo is using the Phosphor Icons Core repository as a source: @phosphor-icons/core