# react-svgmt

> Convenient SVG loading and manipulation from react

Latest version **3.0.0** (published 2025-03-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-svgmt
pnpm add react-svgmt
yarn add react-svgmt
bun add react-svgmt
```

## Health

**Score 35/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2025-03-27 |
| First published | 2018-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 46.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 122 |
| Author | Hugo Zapata |
| Maintainers | hugozap |
| Keywords | react, svg |

## Links

- npm: https://www.npmjs.com/package/react-svgmt
- Repository: https://github.com/hugozap/react-svgmt
- Homepage: https://hugozap.github.io/react-svgmt
- Issues: https://github.com/hugozap/react-svgmt/issues
- npm.io page: https://npm.io/package/react-svgmt

## Dependencies (2)

- [d3-ease](https://npm.io/package/d3-ease.md) ^1.0.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2025-03-27
- 2.0.2 — 2023-03-13
- 2.0.0 — 2023-03-10
- 1.2.0 — 2022-02-07
- 1.1.11 — 2020-02-03
- 1.1.9 — 2019-09-29
- 1.1.8 — 2019-04-19
- 1.1.7 — 2019-02-12
- 1.1.6 — 2018-07-02
- 1.1.4 — 2018-05-16
- 1.1.3 — 2018-05-16
- 1.1.2 — 2018-05-02
- 1.1.1 — 2018-04-29
- 1.1.0 — 2018-04-16
- 1.0.2 — 2018-04-11
- … 1 more at https://npm.io/package/react-svgmt/versions

## README

# react-svgmt

react-svgmt (SVG Management Tools for React)

### Installation

```
npm install react-svgmt@latest

```

[Api and Docs](https://hugozap.github.io/react-svgmt/#api)

### Usage

Import the `SvgLoader` and `SvgProxy` elements

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

Example: Create a list CSS selectors and update each one
[![Edit react-svgmt-nth-child](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-svgmt-nth-child-rh48e?fontsize=14)

```js
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. 


```jsx
<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](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](https://codesandbox.io/s/7w81wm0z11?file=/src/index.js:0-1182_) for an example.


#### Credits

This project is sponsored by [Diagram.codes Studio](https://studio.diagram.codes)


Author:

 - [Hugo Zapata](https://hugozap.com)

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

 - [https://github.com/lifeiscontent](https://github.com/lifeiscontent)
 - [https://github.com/tokyoincode](https://github.com/tokyoincode)


The ajax loading bits are based on:

- [https://github.com/iconic/SVGInjector](https://github.com/iconic/SVGInjector)
- [https://github.com/atomic-app/react-svg](https://github.com/atomic-app/react-svg)

---
_Source: https://npm.io/package/react-svgmt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._