@svgin/element: Installation
Install the package
Sanitization dependency
dompurify is an optional peer dependency, not bundled - install it to use the default sanitizer, or skip it entirely if you always pass your own sanitizeFn or set disable-sanitization.
Register the element
One import, one entry point - unlike @svgin/react, @svgin/element has no client/server split (a custom element only ever runs in the browser), so there is nothing to choose between. Importing it registers <svg-in> globally as a side effect.
import '@svgin/element'; // registers <svg-in> as a side effect
<svg-in src="/icons/logo.svg" width="24" height="24" fill="currentColor"></svg-in>Full attribute/property/event reference in the API reference.
Using from a CDN, no build tool
dompurify is loaded lazily via a bare import('dompurify'), which only resolves in a plain browser <script type="module"> (no bundler) with an import map telling the browser where to fetch it from. Any npm package is automatically mirrored on unpkg and jsDelivr, so no separate CDN publish step is needed.
<script type="importmap">
{
"imports": {
"dompurify": "https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.es.mjs"
}
}
</script>
<script type="module" src="https://unpkg.com/@svgin/element"></script>
<svg-in src="/icons/logo.svg" width="24" height="24" fill="currentColor"></svg-in>Pin exact versions for anything beyond a quick demo. If you pass your own sanitizeFn or use disable-sanitization, DOMPurify is never imported at all and the import map can be skipped entirely.