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
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>)