Skip to content


Repository files navigation


react-svgmt (SVG Management Tools for React)


npm install react-svgmt@latest

Api and Docs


Import the SvgLoader and SvgProxy elements

import { SvgLoader, SvgProxy } from 'react-svgmt';

Example: Create a list CSS selectors and update each one Edit react-svgmt-nth-child

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" />
        {, ix) => (
          <SvgProxy key={ix} selector={selector} fill="blue" />

Loading and manipulating and SVG

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} />

There are two ways to load an SVG file:

  1. From a URL (using the path prop)
  2. From a string with the SVG file contents (using the svgXML prop)

More features, API and examples see

How to change the selectors and reset previous elements?

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 Studio


Special thanks (for contributing to the first version of this library) to:

The ajax loading bits are based on: