Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-svgmt

react-svgmt (SVG Management Tools for React)

Installation

npm install react-svgmt

Api and Docs

Usage

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" />
        {selectors.map((selector, ix) => (
          <SvgProxy key={ix} selector={selector} fill="blue" />
        ))}
      </SvgLoader>
    </div>
  );
}

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

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 https://hugozap.github.io/react-svgmt

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.

Credits

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:

About

SVG Loading and Manipulation Tools for React

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages