BitstylesPhoenix.Icon (bitstyles_phoenix v0.3.0) View Source

An SVG icon system, that expects the icons to be present on the page, rendered as SVG <symbol>s.

Link to this section Summary

Functions

Renders an icon element.

Link to this section Functions

Link to this function

ui_icon(name, opts \\ [])

View Source

Renders an icon element.

opts[:name] — The name of the icon to render. This must be present in the SVG that renders all the icons in the top of the body e.g. _svgs.html.eex as a <symbol> containing one filled path.

opts[:size] - Specify the icon size to use. Available sizes are specified in CSS, and default to s, m, l, xl. If you do not specify a size, the icon will fit into a 1em square.

See the bitstyles icon docs for examples of icon usage, and available icons in the bitstyles icon set.

An icon

iex> safe_to_string ui_icon("right")
~s(<svg aria-hidden="true" class="a-icon" focusable="false" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-right"></svg>)

An icon with a size

iex> safe_to_string ui_icon("right", size: "s")
~s(<svg aria-hidden="true" class="a-icon a-icon--s" focusable="false" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-right"></svg>)

An icon with a specific width & height

iex> safe_to_string ui_icon("trashcan", width: "20", height: "30")
~s(<svg aria-hidden="true" class="a-icon" focusable="false" height="30" width="20" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-trashcan"></svg>)

An icon with extra options

iex> safe_to_string ui_icon("trashcan", class: "foo bar")
~s(<svg aria-hidden="true" class="a-icon foo bar" focusable="false" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-trashcan"></svg>)