ex_heroicons v2.0.0

View Source Heroicons (ex_heroicons v2.0.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.

Current Heroicons version: 2.0.11

installation

 Installation

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

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

Then run mix deps.get.

usage

 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

 Config

Defaults can be set in the Heroicons application configuration.

config :ex_heroicons, type: "outline"

Link to this section Summary

Functions

icon(name, opts \\ [])

Generates an icon.

names()

Returns a list of available icon names

types()

Returns a list of available icon types

Link to this section Functions

Link to this function

icon(name, opts \\ [])

View Source 
@spec icon(
  String.t(),
  keyword()
) :: Phoenix.HTML.safe()

Generates an icon.

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

options

 Options

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

examples

 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>
Link to this function

names()

View Source 
@spec names() :: [String.t()]

Returns a list of available icon names

Link to this function

types()

View Source 
@spec types() :: [String.t()]

Returns a list of available icon types