API reference

<SvgIn />, <SvgInSuspense />, <SvgInProvider>, and <SvgInShadow /> 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/suspense. 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.

<SvgInShadow />

From svgin-react/shadow. Renders into a shadow root attached to a host <span> (or <div>) instead of the light DOM, so page CSS can never reach in and its own styles can never leak out. Shares most props with <SvgIn /> (see the shared table below), plus its own styles (CSS injected inside the shadow root), mode ( 'open' | 'closed', passed to attachShadow), and as ('span' | 'div', the host tag). No className, loadingFallback, or loading yet, and not read by <SvgInProvider>. 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, disableSanitization, and fetchOptions.

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

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

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

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

clearSvgCache(url?) / hasCachedSvg(url)

Also from svgin-react/core. clearSvgCache forgets one cached entry, or every entry if url is omitted. hasCachedSvg checks whether a URL is currently cached, without fetching it. Both only see the same shared cache that a plain <SvgIn src={url} /> (no sanitizeFn/disableSanitization/fetchOptions) and preloadSvg read from and write to.

import { clearSvgCache, hasCachedSvg } from 'svgin-react/core';

hasCachedSvg('/icons/alert.svg'); // false
clearSvgCache('/icons/alert.svg'); // or clearSvgCache() for every entry

import { clearSvgCache, hasCachedSvg } from 'svgin-react/core';

hasCachedSvg('/icons/alert.svg'); // false
clearSvgCache('/icons/alert.svg'); // or clearSvgCache() for every entry

Shared props