BitstylesPhoenix.Icon.ui_icon

You're seeing just the function ui_icon, go back to BitstylesPhoenix.Icon module for more information.
Link to this function

ui_icon(name, opts \\ [])

View Source

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