View Source BitstylesPhoenix.Component.UseSVG (bitstyles_phoenix v2.3.1)
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>
"""