View Source BitstylesPhoenix.Component.UseSVG (bitstyles_phoenix v2.4.0)

Components for rendering SVGs.

Summary

Functions

Renders an SVG tag with a use reference.

Functions

Renders an SVG tag with a use reference.

A referenced SVG (inlined on the page)

iex> assigns = %{}
...> render ~H"""
...> <.ui_svg use="arrow"/>
...> """
"""
<svg xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="#arrow">
  </use>
</svg>
"""

Requires additional content on the page:

<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
  <symbol id="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>

A referenced SVG (external file)

iex> assigns = %{}
...> render ~H"""
...> <.ui_svg use="logo" file="assets/logo.svg" viewbox="0 0 400 280"/>
...> """
"""
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 280">
  <use xlink:href="assets/logo.svg#logo">
  </use>
</svg>
"""

A referenced SVG (external file with symbols)

iex> assigns = %{}
...> render ~H"""
...> <.ui_svg file="assets/icons.svg" use="icon-bin"/>
...> """
"""
<svg xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="assets/icons.svg#icon-bin">
  </use>
</svg>
"""