web components

boil-svg

Boil svg images.

code
<boil-svg>
  <svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 200px">
    <path d="M18 12.5V10a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1.4"></path>
    <path d="M14 11V9a2 2 0 1 0-4 0v2"></path>
    <path d="M10 10.5V5a2 2 0 1 0-4 0v9"></path>
    <path d="m7 15-1.76-1.76a2 2 0 0 0-2.83 2.82l3.6 3.6C7.5 21.14 9.2 22 12 22h2a8 8 0 0 0 8-8V7a2 2 0 1 0-4 0v5"></path>
  </svg>
</boil-svg>

Raster image

It works with raster images when inside an <svg>.

code
<boil-svg>
  <svg viewbox="0 0 300 300" width="300px">
    <image href="./rickroll.png" x="10" y="10" width="280" height="280">
    </image>
  </svg>
</boil-svg>