An open API service indexing awesome lists of open source software.

https://github.com/dennym/phosphor_icons_ex

Phoenix components for Phosphor icons!
https://github.com/dennym/phosphor_icons_ex

elixir phosphor-icons phosphoricons

Last synced: 5 days ago
JSON representation

Phoenix components for Phosphor icons!

Awesome Lists containing this project

README

          

# PhosphorIconsEx

[![hex.pm](https://img.shields.io/hexpm/v/phosphor_icons_ex.svg)](https://hex.pm/packages/phosphor_icons_ex)
[![docs](https://img.shields.io/badge/hex-docs-blue.svg)](https://hexdocs.pm/phosphor_icons_ex)
[![ci](https://github.com/dennym/phosphor_icons_ex/actions/workflows/ci.yml/badge.svg)](https://github.com/dennym/phosphor_icons_ex/actions/workflows/ci.yml)
[![Hex Downloads](https://img.shields.io/hexpm/dt/phosphor_icons_ex)](https://hex.pm/packages/phosphor_icons_ex)

This package provides an easy way to use [Phosphor](https://phosphoricons.com/) 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](https://github.com/phosphor-icons/homepage#phosphor-icons).

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

## Installation

> **Warning:** This library only supports phoenix_live_view v1.0+

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

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

Then run `mix deps.get`.

## Usage

### With Heex

```elixir

```

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`

### In your own custom components

```elixir

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="" />
```

## Thanks
* phosphor for the icons licensed under [MIT](https://github.com/phosphor-icons/homepage/blob/master/LICENSE)
* [@zoedsoupe](https://github.com/zoedsoupe) which heavily inspired this package with [lucide_icons](https://github.com/zoedsoupe/lucide_icons/) licensed under [BSD](https://github.com/zoedsoupe/lucide_icons/blob/main/LICENSE)

## Disclaimer
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