View Source README

Moss Piglet logo

heroicons-render

Heroicons Render

Hex Version Hex Downloads Hex Docs

Heroicons Render is a modified version of the HeroiconsV1 from the wonderful Petal Components. This is to enable calling the render function from Petal Components with Heroicons version 2. You can use this library in conjuction with Petal Components and Heroicons.

about-the-petal-components-library

About the Petal Components library

Hex Version Hex Docs

DEMO | DOCS

Petal stands for:

dependencies

Dependencies

This package requires Live View 0.18 and Phoenix 1.6.

It also requires Elixir 1.12 to work. It is designed to supplement the Petal Components and Heroicons libraries. If you are are not using those libraries, then there is really no reason to use this. This library plugs a hole where you could not implement the icon render function from Petal Components with v2 Heroicons.

install

Install

Recommended

This package can be installed by adding :heroicons_render to your list of dependencies in mix.exs:

defp deps do
  [
    ...
    {:heroicons_render, "~> 0.1.1"},
  ]
end

Then, run mix deps.get. Additionally, run mix deps.update heroicons_render occasionally to ensure you have the latest release.

Running on main

If you would like to run on the main branch, then update your dependencies as such:

defp deps do
  [
    ...
    {:heroicons_render, github: "/moss-piglet/heroicons_render"},
  ]
end

usage

Usage

You can use the render function the same as you would in the Petal Components library, e.g. by calling:

## Petal Components
<HeroiconsV1.Solid.render icon="document_text" />

## Heroicons Render
<HeroiconsV2.Solid.render icon="document_text" />

You may need to add the following to your Phoenix app:

defmodule MyAppWeb do
  ...
  use PetalComponents
  use HeroiconsRender # add this
  ...
end

# In any files that has PetalComponents you might need to also add HeroiconsRender
use PetalComponents
use HeroiconsRender # add this

Then to call Heroicons version 2 icons, you can use the Heroicons library function call:

<Heroicons.map outline class="some classes" />

This enables you to use the Petal Components library and Heroicons library and have your components use version 2 of Heroicons without conflict.