View Source Heroicons (ex_heroicons v0.6.0)

This package adds a convenient way of using Heroicons with your Phoenix, Phoenix LiveView and Surface applications.

Heroicons is "A set of 450+ free MIT-licensed high-quality SVG icons for you to use in your web projects." Created by the amazing folks at Tailwind Labs.

You can find the original docs here and repo here.

Installation

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

def deps do
  [
    {:ex_heroicons, "~> 0.6.0"}
  ]
end

Then run mix deps.get.

Usage

With Eex or Leex

<%= Heroicons.icon("academic-cap", type: "outline", class: "h-4 w-4") %>

With Heex

<Heroicons.LiveView.icon name="academic-cap" type="outline" class="h-4 w-4" />

With Surface

<Heroicons.Surface.Icon name="academic-cap" type="outline" class="h-4 w-4" />

Config

Defaults can be set in the Heroicons application configuration.

config :ex_heroicons, type: "outline"

Link to this section Summary

Functions

Generates an icon.

Returns a list of available icon names

Returns a list of available icon types

Link to this section Functions

Specs

icon(
  String.t(),
  keyword()
) :: Phoenix.HTML.safe()

Generates an icon.

Options may be passed through to the SVG tag for custom attributes.

Options

  • :type - the icon type. Accepted values are ["outline", "solid"]. Required if default type is not configured.
  • :class - the css class added to the SVG tag

Examples

icon("academic-cap", type: "outline", class: "h-4 w-4")
#=> <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path d="M12 14l9-5-9-5-9 5 9 5z"/>
      <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"/>
    </svg>

Specs

names() :: [String.t()]

Returns a list of available icon names

Specs

types() :: [String.t()]

Returns a list of available icon types