react-svgmt

    1.1.11 • Public • Published

    react-svgmt

    react-svgmt (SVG Management Tools for React)

    Previously known as react-samy-svg

    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

    Credits

    Author:

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

    The ajax loading bits are based on:

    Keywords

    Install

    npm i react-svgmt

    DownloadsWeekly Downloads

    3,359

    Version

    1.1.11

    License

    MIT

    Unpacked Size

    93.3 kB

    Total Files

    44

    Last publish

    Collaborators

    • hugozap