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 with icon-.
  • 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.
  • file - To be set if icons should be loaded from an external resource (see BitstylesPhoenix.Component.UseSVG.ui_svg/1). This can also be configured to a default icon_file, see BitstylesPhoenix for config options. With the configuration present, inline icons can still be rendered with file={nil}.
  • class - Extra classes to pass to the svg. See BitstylesPhoenix.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>
"""