BitstylesPhoenix.Icon (bitstyles_phoenix v0.4.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.
Accepts 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. as a <symbol>
containing one filled path.
Options:
: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.
All other options are passed to the Phoenix.HTML.Tag.content_tag/3
through BitstylesPhoenix.UseSVG.ui_svg/2
of the outer <svg>
element.
See the bitstyles icon docs for examples of icon usage, and available icons in the bitstyles icon set.
An icon (from inline svg)
iex> safe_to_string ui_icon("inline-arrow")
~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-inline-arrow"></svg>)
Requires additional content on the page:
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
<symbol id="icon-inline-arrow" viewBox="0 0 100 100">
<path d="M32.83,97.22a6.07,6.07,0,1,1-8.59-8.58L58.59,54.29a6.07,6.07,0,0,0,0-8.58L24.24,11.36a6.07,6.07,0,1,1,8.59-8.58L75.76,45.71a6.07,6.07,0,0,1,0,8.58Z" fill-rule="evenodd" />
</symbol>
</svg>
An icon with a size
iex> safe_to_string ui_icon("hamburger", size: "s", external: "assets/icons.svg")
~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="assets/icons.svg#icon-hamburger"></svg>)
An icon with extra options
iex> safe_to_string ui_icon("bin", class: "foo bar", external: "assets/icons.svg")
~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="assets/icons.svg#icon-bin"></svg>)