@evo/react-embed-svg

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).