@evo/react-embed-svg
v1.0.2
Published
React component that loads content of an SVG file
Downloads
76
Maintainers
Keywords
Readme
EmbedSVG
React component to load and embed content of a SVG file into specified container.
Usage
Example of usage:
import EmbedSVG from '@evo/EmbedSVG';
const Example = () => (
<EmbedSVG
src='related/path/to/image.svg'
container={this.container}
className='svg-icon'
onLoad={(svgText) => svgText}
onError={(event) => { ... }}
/>
);
Dependencies
The following dependencies should be installed in the project that will use this component:
"peerDependencies": {
"react": ">=16.4.2",
"react-dom": ">=16.4.2",
"prop-types": ">=15.5.10"
},
API
EmbedSVG
component has following options:
src
type: string;
This property is required. It is related path to SVG file.
container
type: object;
default: null;
This property is not required. It is a DOM element. Content of the SVG file will be loaded into this DOM element. If it's not setted the content of the SVG file won't be embed anywhere.
className
type: string;
default: null;
This property is not required. Value of this property will be added to <svg>
tag.
onLoad
type: function;
default: (rawSVG) => rawSVG;
This property is not required. Function will be executed after SVG file loading.
It takes the single argument rawSVG
(content of the SVG file as string).
This function should return content of the SVG file as string
otherwise result won't be embed into container.
onError
type: function;
default: null;
This property is not required.
Function will be executed only after SVG file loading fail.
It takes the single argument event
(for more information see developer.mozilla.org).