react-inlinesvg

   

Load inline, local, or remote SVGs in your React components.

View the demo

Highlights

- 🏖 Easy to use: Just set the src
- 🛠 Flexible: Personalize the options to fit your needs
- ⚡️ Smart: Async requests will be cached.
- 🚀 SSR: Render a loader until the DOM is available
- 🟦 Typescript: Nicely typed

Usage

``sh
npm i react-inlinesvg
`

And import it into your code:

`tsx
import React from 'react';
import SVG from 'react-inlinesvg';

export default function App() {
return (



src="https://cdn.svgporn.com/logos/react.svg"
width={128}
height="auto"
title="React"
/>



);
}
`

Props

src {string} - required.
The SVG file you want to load. It can be a require, URL, or a string (base64 or URL encoded).
_If you are using create-react-app and your file resides in the public directory, you can use the path directly without require._

baseURL {string}
An URL to prefix each ID in case you use the tag and uniquifyIDs.

children {ReactNode}
The fallback content in case of a fetch error or unsupported browser.

`



`

cacheRequests {boolean} ▶︎ true
Cache remote SVGs.
Starting in version 4.x, you can also cache the files permanently, read more below.

description {string}
A description for your SVG. It will override an existing tag.

fetchOptions {RequestInit}
Custom options for the request.

innerRef {React.Ref}
Set a ref in SVGElement.

>The SVG is processed and parsed so the ref won't be set on the initial render.
You can use the onLoad callback to get and use the ref instead.

loader {node}
A component to be shown while the SVG is loading.

onError {function}
A callback to be invoked if loading the SVG fails.
This will receive a single argument with:

- a FetchError with:

`typescript
{
message: string;
type: string;
errno: string;
code: string;
}
`

- or an InlineSVGError, which has the following properties:

`typescript
{
name: 'InlineSVGError';
data: object; // optional
message: string;
}
`

onLoad {function}.
A callback to be invoked upon successful load.
This will receive 2 arguments: the src prop and an isCached boolean

preProcessor {function} ▶︎ string
A function to process the contents of the SVG text before parsing.

title {string | null}
A title for your SVG. It will override an existing