diff --git a/docs/svg-dynamically-loaded.md b/docs/svg-dynamically-loaded.md index ded8867..1355c2a 100644 --- a/docs/svg-dynamically-loaded.md +++ b/docs/svg-dynamically-loaded.md @@ -1,5 +1,7 @@ -# React SVG Pan Zoom - Getting Started +# React SVG Pan Zoom - Dynamically Loading an SVG + +## Using react-svg-pan-zoom-loader To load an SVG dynamically there's a standalone package (made in collaboration with [nufaylr](https://github.com/nufaylr)). It's available here https://github.com/nufaylr/react-svg-pan-zoom-loader. @@ -14,9 +16,37 @@ const Viewer = () => ( {content} - + )}/> ) ``` +## Using svg-parser and hast-to-hyperscript + +If you are having trouble with using react-svg-pan-zoom-loader you may want to try this alternative method using [svg-parser](https://github.com/Rich-Harris/svg-parser) and [hast-to-hyperscript](https://github.com/syntax-tree/hast-to-hyperscript). + +```js +import {parse as parseSVG} from 'svg-parser' +import {toH} from 'hast-to-hyperscript' + +const Viewer = () => { + const [svg, setSvg] = React.useState(null) + + React.useEffect(() => { + fetch('file/path/image.svg') + .then((r) => r.text()) + .then((text) => { + const hast = parseSVG(text) + const element = toH(React.createElement, hast) + setSvg(element) + }) + }, []) + + return ( + + {svg} + + ) +} +```