View Source PhoenixHeroicons (phoenix_heroicons v0.2.0)
Phoenix Heroicons is a package that will install the source SVGs for the Heroicons library and provide an Elixir module for rendering those SVGs inside of Phoenix templates.
usage
Usage
To render a Heroicon within an eex
template, simply call PhoenixHeroicons.svg
with the icon's type and name, for
example: outline/bell
. See PhoenixHeroicons.svg
.
Link to this section Summary
Functions
Renders an icon function component. This function delegates to PhoenixHeroicons.svg/2
.
Gets an HTML-safe SVG for use in a Phoenix template for the given Heroicon. Any specified attributes will overwrite
attributes on the root svg
element.
Link to this section Functions
Renders an icon function component. This function delegates to PhoenixHeroicons.svg/2
.
options
Options
Required assigns:
name
: The name of the heroicon to render. This name does not include theoutline
orsolid
type portion
Optional assigns
outline
: Specifying this assign will render the icon in theoutline
style. If not specified, thesolid
style will be used.
All other assigns will be added as attributes to the svg
, so you can specify things like class
.
examples
Examples
<.icon name="bell" outline/>
<.icon name="bell" class="h-6 w-6"/>
Gets an HTML-safe SVG for use in a Phoenix template for the given Heroicon. Any specified attributes will overwrite
attributes on the root svg
element.
Returns {:safe, <html content>}
if the icon exists or nil
if it does not.
examples
Examples
iex> PhoenixHeroicons.svg("outline/bell")
{:safe, "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">...</svg>"}
iex> PhoenixHeroicons.svg("outline/bell", class: "text-red-500")
{:safe, "<svg class=\"text-red-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">...</svg>"}