@svg-use/react
v0.4.3
Published
Tools and bundler plugins for loading SVG images via use[href], for use in components.
Downloads
1,117
Maintainers
Readme
@svg-use/react
A component for using the output of @svg-use/core
in React, with the default
theme config. Also includes utilities for creating your own wrappers.
Quick start
pnpm install @svg-use/react
import { createThemedExternalSvg, ThemedExternalSvg } from '@svg-use/react';
// Assuming you have {url, id, viewBox} in scope, for example from a loader or a priori information
const MyIcon = createThemedExternalSvg({ url, id, viewBox });
const MyComponent = () => {
return (
<>
<MyIcon />
<ThemedExternalSvg iconUrl={url} iconId={id} viewBox={viewBox} />
</>
);
};
Optionally, in your application root, you can pass config via context:
import { configContext, type Config } from '@svg-use/react';
const config: Config = {
// Add any config options here
rewritePath: (pathOrHref) => pathOrHref,
runtimeChecksEnabled: process.env.NODE_ENV !== 'production',
};
const AppRoot = () => {
return (
<configContext.Provider value={config}>
{/* The rest of your application */}
</configContext.Provider>
);
};