View Source BitstylesPhoenix.Component.Icon (bitstyles_phoenix v2.4.0)
An SVG icon system, that expects the icons to be present on the page, rendered as SVG <symbol>
s.
Summary
Functions
Renders an icon element.
Functions
Renders an icon element.
This uses BitstylesPhoenix.Component.UseSVG
to render an icon either inlined in the page or
referenced in an external SVG file. Icons are assumed to have an id prefixed with icon-
followed
by the name of the icon, which is used to reference the icon.
Attributes
name
(required) - The name of the icon. Assumes icons are prefixed withicon-
.size
- Specify the icon size to use. Available sizes are specified in CSS, and default tos
,m
,l
,xl
. If you do not specify a size, the icon will fit into a1em
square.file
- To be set if icons should be loaded from an external resource (seeBitstylesPhoenix.Component.UseSVG.ui_svg/1
). This can also be configured to a defaulticon_file
, seeBitstylesPhoenix
for config options. With the configuration present, inline icons can still be rendered withfile={nil}
.class
- Extra classes to pass to the svg. SeeBitstylesPhoenix.Helper.classnames/1
for usage.
See the bitstyles icon docs for examples of icon usage, and available icons in the bitstyles icon set.
An icon (from inline svg)
iex> assigns = %{}
...> render ~H"""
...> <.ui_icon name="inline-arrow"/>
...> """
"""
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
<use xlink:href="#icon-inline-arrow">
</use>
</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> assigns = %{}
...> render ~H"""
...> <.ui_icon name="hamburger" file="/assets/icons.svg" size="xl"/>
...> """
"""
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--xl" focusable="false" height="16" width="16">
<use xlink:href="/assets/icons.svg#icon-hamburger">
</use>
</svg>
"""
An icon with extra options
iex> assigns = %{}
...> render ~H"""
...> <.ui_icon name="bin" file="/assets/icons.svg" class="foo bar"/>
...> """
"""
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon foo bar" focusable="false" height="16" width="16">
<use xlink:href="/assets/icons.svg#icon-bin">
</use>
</svg>
"""