https://github.com/hugozap/react-svgmt
SVG Loading and Manipulation Tools for React
https://github.com/hugozap/react-svgmt
Last synced: 3 months ago
JSON representation
SVG Loading and Manipulation Tools for React
- Host: GitHub
- URL: https://github.com/hugozap/react-svgmt
- Owner: hugozap
- License: mit
- Created: 2018-03-31T18:30:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-04T14:30:12.000Z (about 2 years ago)
- Last Synced: 2025-03-30T04:01:37.191Z (4 months ago)
- Language: JavaScript
- Homepage: https://hugozap.github.io/react-svgmt/
- Size: 13.7 MB
- Stars: 120
- Watchers: 3
- Forks: 17
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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
[](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 (
{selectors.map((selector, ix) => (
))}
);
}
```
#### Loading and manipulating and SVG
If the `path` prop is used, then the asset will be fetched from the url.
```jsx
```
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)