react-svg-pan-zoom-loader

This package allows us to load a SVG file remotely into react-svg-pan-zoom component.

Installation

YARN

yarn add react-svg-pan-zoom-loader

NPM

npm install --save react-svg-pan-zoom-loader

Usage

Example using src prop:

import {ReactSvgPanZoomLoader} from 'react-svg-pan-zoom-loader'

...

return (
    <ReactSvgPanZoomLoader src="file/path/image.svg" className="my-container-class-name" render= {(content) => (
        <ReactSVGPanZoom width={500} height={500}>
            <svg width={500} height={500} >
                {content}
            </svg>
        </ReactSVGPanZoom>
    )}/>
)

Example using svgXML prop:

import {ReactSvgPanZoomLoader} from 'react-svg-pan-zoom-loader'

...

return (
    <ReactSvgPanZoomLoader svgXML={svgAsString} render= {(content) => (
        <ReactSVGPanZoom width={500} height={500}>
            <svg width={500} height={500} >
                {content}
            </svg>
        </ReactSVGPanZoom>
    )}/>
)

Example using src prop with proxy node prop type, under here we can manipulate svg element attributes <SvgLoaderSelectElement/> component.

import {ReactSvgPanZoomLoader, SvgLoaderSelectElement} from 'react-svg-pan-zoom-loader'

...

return (
    <ReactSvgPanZoomLoader src="file/path/image.svg" proxy = {
        <>
            <SvgLoaderSelectElement selector="#tree" onClick={onItemClick}
            stroke={props.strokeColor}/>
        </>
    } render= {(content) => (

        <ReactSVGPanZoom width={500} height={500}>
            <svg width={500} height={500} >
                {content}
            </svg>
        </ReactSVGPanZoom>

    )}/>
)

Example using svgXML prop with proxy node prop type, under here we can manipulate svg element attributes <SvgLoaderSelectElement/> component.

import {ReactSvgPanZoomLoader, SvgLoaderSelectElement} from 'react-svg-pan-zoom-loader'

...
const svgAsString = '<svg xmlns="http://www.w3.org/2000/svg...'

return (
    <ReactSvgPanZoomLoader svgXML={svgAsString} proxy = {
        <>
            <SvgLoaderSelectElement selector="#tree" onClick={onItemClick}
            stroke={props.strokeColor}/>
        </>
    } render= {(content) => (

        <ReactSVGPanZoom width={500} height={500}>
            <svg width={500} height={500} >
                {content}
            </svg>
        </ReactSVGPanZoom>

    )}/>
)

Typescript type definitions

Contributed by Rafal Witczak

npm i @types/react-svg-pan-zoom-loader

Live Demo

Contributors

• nufaylr (author)
• chrvadala
• SVG XML feature contributed by acenturyandabit and jamesmenera