View Source Heroicons (ex_heroicons v1.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: 1.0.6
Installation
Add ex_heroicons
to the list of dependencies in mix.exs
:
def deps do
[
{:ex_heroicons, "~> 1.0.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