Introduction

svgin fetches an SVG from a URL, or takes raw markup directly, and renders it as a real, styleable element instead of an <img>. It sanitizes the SVG with DOMPurify by default, so it is safe to use with SVGs from a source you do not fully control. It ships as two packages, sharing the same fetch/sanitize/cache internals:

@svgin/react

Client and server React components - <SvgIn />, <SvgInSuspense />, <SvgInProvider>, and <SvgInShadow />.

Continue to Installation or jump straight to the API reference, or see it live at /react.

@svgin/element

A framework-agnostic <svg-in> custom element - no React required, works in any framework or none.

Continue to Installation or jump straight to the API reference, or see it live at /element.