svgin-react 0.9.1

Try svgin-react

svgin-react fetches an SVG from a URL (or takes raw markup directly) and renders it as a real, styleable React element instead of an <img>. It sanitizes the SVG by default, so it is safe to use with an SVG you did not create yourself, and it works both in the browser and in React Server Components.

This site is installed as a real dependency from npm, not imported from the library's source, so every demo below reflects exactly what a real install gives you.

Inspector
Client
Paste an SVG and see exactly what the default DOMPurify sanitizer strips, live, using the real library.
Open demo →
Server component
RSC
The async server <SvgIn /> fetching and sanitizing an SVG on the server, with zero client JS shipped for it.
Open demo →
Suspense
Client
<SvgInSuspense /> driven by React 19's use(), paired with a real <Suspense> boundary and an error boundary.
Open demo →
Provider defaults
Client
<SvgInProvider /> setting shared className, fallback, and onError defaults for every <SvgIn /> beneath it.
Open demo →
Lazy loading
Client
<SvgIn loading="lazy" /> deferring fetch/sanitize until the placeholder scrolls near the viewport.
Open demo →