Phosphor LiveView

Phosphor LiveView provides typed Phoenix components for the entire Phosphor icon set. Icons are bundled as compile-time SVG data, so no runtime generators or asset pipelines, and render directly inside HEEx/LiveView templates.

Phosphor itself is an icon family by Tobias Fried with 1512 glyphs across six weights (Thin, Light, Regular, Bold, Fill, Duotone). Every icon is drawn on a 16x16 px grid with stroke data preserved for downstream tweaking. See the full catalogue at phosphoricons.com.

PhosphorIcons Version: 2.1.0

Installation

def deps do
  [
    {:phosphor_live_view, "~> 0.1.0"}
  ]
end

Usage

Static helpers

<Phosphor.airplane class="h-6 w-6" />
<Phosphor.airplane weight="bold" class="h-6 w-6" />

Dynamic rendering

<Phosphor.icon name="airplane" weight="duotone" class="h-6 w-6" />

Passing attributes

Any additional assigns are forwarded to the <svg> element.

<Phosphor.airplane
  id="my-airplane"
  class="inline-block h-5 w-5"
  stroke-width="1.5"
/>

If you provide aria-label, the component keeps it. Otherwise it adds aria-hidden="true" with role="img" by default.

Integrating with your components

# core_components.ex
attr :name, :string, required: true
attr :weight, :string, default: "regular"
attr :class, :string, default: "icon"
attr :rest, :global

def icon(assigns) do
  ~H"""
  <Phosphor.icon name={@name} weight={@weight} class={@class} {@rest} />
  """
end

Then use it anywhere:

<.icon name="airplane" class="text-gray-500" />

Regenerating icons

SVG sources live under priv/phosphor_icons/raw/<weight>/. To rebuild the compile-time manifest run:

mix phosphor.gen

Acknowledgements

This library was inspired by Christian Pagsuyoin’s lucide_live_view and Max Veytsman’s heroicons_elixir work.

License

Source code is available under the MIT License.

Next Page → LICENSE