Load inline, local or remote SVGs in your React components.
src
npm i react-inlinesvg
And import it into your code:
import React from 'react';
import SVG from 'react-inlinesvg';
const Icon = () => <SVG src={require('/path/to/myfile.svg')} />;
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 are using the <base>
tag and uniquifyIDs
.
children {ReactNode}
The fallback content in case of a fetch error or unsupported browser.
<SVG src="...">
<img src="..." alt="fallback" />
</SVG>
cacheRequests {boolean} ▶︎ true
Cache remote SVGs.
description {string}
A description for your SVG. It will override an existing <desc>
tag.
innerRef {React.Ref|function}
Get the SVG HTMLElement.
loader {node}
A component to be shown while the SVG is loading.
If you set
onError {function}
A callback to be invoked if loading the SVG fails.
This will receive a single argument with:
FetchError
with:{
message: string;
type: string;
errno: string;
code: string;
}
InlineSVGError
, which has the following properties:{
name: 'InlineSVGError',
data?: object,
message: string
}
onLoad {function}.
A callback to be invoked upon successful load.
This will receive 2 arguments: the src
prop and a hasCache
boolean
preProcessor {function} ▶︎ string
A function to process the contents of the SVG text before parsing.
title {string}
A title for your SVG. It will override an existing <title>
tag.
uniqueHash {string} ▶︎ a random 8 characters string [A-Za-z0-9]
A string to use with uniquifyIDs
.
uniquifyIDs {boolean} ▶︎ false
Create unique IDs for each icon.
Additional props will be spread over the SVG element.
<SVG
baseURL="/home"
cacheRequests={true}
description="The React logo"
loader={<span>Loading...</span>}
onError={error => console.log(error.message)}
onLoad={(src, hasCache) => console.log(src, hasCache)}
preProcessor={code => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
src="https://cdn.svgporn.com/logos/react.svg"
title="React"
uniqueHash="a1f8d1"
uniquifyIDs={true}
/>
Any browsers that support inlining SVGs and fetch will work.
If you need to support legacy browsers you’ll need to include a polyfiil for fetch
and Number.isNaN
in your app. Take a look at react-app-polyfill or polyfill.io.
If you are loading remote SVGs, you’ll need to make sure it has CORS support.
One of the reasons SVGs are awesome is because you can style them with CSS. Unfortunately, this winds up not being too useful in practice because the style element has to be in the same document. This leaves you with three bad options:
But there’s an alternative that sidesteps these issues: load the SVG with a GET request and then embed it in the document. This is what this component does.
The SVG [<use>
][svg-use-external-source] element can be used to achieve something similar to this component. See [this article][use-article] for more information and [this table][use-support] for browser support and caveats.
Thanks to @matthewwithanm for creating this component and so kindly transfer it to me. I’ll definitely keep the good work! ❤️
Author: gilbarbara
Demo: https://codesandbox.io/s/j25bv
Source Code: https://github.com/gilbarbara/react-inlinesvg
#reactjs #react #javascript