API reference

All four exports share the props table below, with the exceptions noted per export.

`<SvgIn />`

From svgin-react/client or svgin-react/server. The server version's onMount and loading are no-ops (no DOM to hand back, no loading state to defer).

`<SvgInSuspense />`

From svgin-react/client. Suspends via React 19's use() instead of managing loading/error state itself. Does not accept fallback, loadingFallback, or loading - pair it with a real <Suspense> boundary and an error boundary instead. See the live demo.

`<SvgInProvider />`

From svgin-react/client. Sets shared className, fallback, loadingFallback, onError, sanitizeFn, disableSanitization, and loading defaults for every <SvgIn /> beneath it. A prop passed directly to a given <SvgIn /> always wins. Not read by <SvgInSuspense />. See the live demo.

`preloadSvg(url, options?)`

From svgin-react/core. Fetches and caches an SVG ahead of render, so the eventual <SvgIn src={url} /> resolves instantly from cache. Accepts sanitizeFn and disableSanitization.

import { preloadSvg } from 'svgin-react/core';

preloadSvg('/icons/alert.svg');

Shared props

Prop	Type	Notes
src	string	URL to fetch. Ignored if svg is also given. src or svg is required.
svg	string	Raw SVG markup, sanitized and rendered directly. Takes precedence over src.
width / height	number \| string
fill	string
className	string
ariaLabel	string
title / description	string	Injects a <title>/<desc> into the rendered SVG.
fallback	ReactNode	Rendered on fetch/sanitize failure. Not used by SvgInSuspense.
loadingFallback	ReactNode	Client component only. Rendered while pending, instead of the default placeholder.
sanitizeFn	(svg: string) => Promise<string>	Overrides the default DOMPurify sanitizer.
disableSanitization	boolean	Skip sanitization entirely. Only for markup you already trust.
onError	(error: Error) => void	Called on fetch/sanitize failure, alongside fallback.
onMount	(svg: SVGSVGElement) => void	Client component only. Called after the SVG mounts or updates.
loading	'eager' \| 'lazy'	Client component only. 'lazy' defers fetch/sanitize until near the viewport.