react-svgmt (SVG Management Tools for React)
npm install react-svgmt@latest
Import the SvgLoader and SvgProxy elements
import { SvgLoader, SvgProxy } from 'react-svgmt';Example: Create a list CSS selectors and update each one
function App() {
//We want to update only elements that match this selectors
const selectors = ["rect:nth-child(1)", "rect:nth-child(4)"];
return (
<div className="App">
<SvgLoader width="100" height="100" path="/sample1.svg">
<SvgProxy selector="rect" fill="red" />
{selectors.map((selector, ix) => (
<SvgProxy key={ix} selector={selector} fill="blue" />
))}
</SvgLoader>
</div>
);
}If the path prop is used, then the asset will be fetched from the url.
<SvgLoader path="svg public url here">
<SvgProxy selector="#Star" stroke={this.state.strokeColor} />
</SvgLoader>There are two ways to load an SVG file:
- From a URL (using the
pathprop) - From a string with the SVG file contents (using the
svgXMLprop)
More features, API and examples see https://hugozap.github.io/react-svgmt
This library doesn't store previous elements state. Say you want to update some elements fill color and then change the selector to update another set of elements.
Don't expect the original element attributes to be reset back to their original state. You need to add a "reset" SvgProxy so all elements attributes are reseted before the additional SvgProxies are processed.
Check this CodeSandbox for an example.
This project is sponsored by Diagram.codes Studio
Author:
Special thanks (for contributing to the first version of this library) to:
The ajax loading bits are based on: