https://github.com/citguru/svgit
Customizeable SVG to React Component
https://github.com/citguru/svgit
Last synced: 3 months ago
JSON representation
Customizeable SVG to React Component
- Host: GitHub
- URL: https://github.com/citguru/svgit
- Owner: CITGuru
- Created: 2019-03-31T18:42:58.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T17:52:00.000Z (about 3 years ago)
- Last Synced: 2025-01-13T09:43:51.618Z (12 months ago)
- Language: JavaScript
- Size: 847 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svgit
> Customizeable SVG to React Component
[](https://www.npmjs.com/package/svgit) [](https://standardjs.com)
This is a simple react library built on [react-inlinesvg](https://github.com/gilbarbara/react-inlinesvg) for manipulating svgs. You can pretty much manipulate `path`,`g`, and other svg components by using their index (more to come) and attrs. This is still at its crude stage.
## Install
```bash
npm install --save svgit
```
## Usage
```jsx
import React, { Component } from 'react'
import SVG from 'svgit'
class Example extends Component {
render () {
return (
)
}
}
```
## Props
----
**src** {string}
The SVG file you want to load. It can be an `url` or a string (base64 or encoded)
**wrapper** {function} ▶︎ `React.createFactory('span')`
A React class or a function that returns a component instance to be used as the wrapper component.
**preloader** {node}
A component to be shown while the SVG is loading.
**selector** {object}
Select a single svg element to be customized. E.g - `{index:4, attrs: { fill:"yellow" }}`.
*index* - index of the element starting from 0
*attrs* - any applicable svg attributes and properties
**selectors** {array}
Select multiple svg elements to be customized. E.g - `[{index:4, attrs: { fill:"yellow" }}]`.
*index* - index of the element starting from 0
*attrs* - any applicable svg attributes and properties
**className** {string}
A class to add to the default wrapper.
**onLoad** {function} ▶︎ a random 8 characters string `[A-Za-z0-9]`
A callback to be invoked upon successful load.
This will receive 2 arguments: the `src` prop and a `isCached` boolean
**onError** {function}
A callback to be invoked if loading the SVG fails.
This will receive a single argument:
- a xhr `RequestError` with:
```js
{
...,
isHttpError: bool,
status: number
}
```
- or an `InlineSVGError`, which has the following properties:
```js
{
name: 'InlineSVGError',
isSupportedBrowser: bool,
isConfigurationError: bool,
isUnsupportedBrowserError: bool,
message: string
}
```
You should head over to [react-inlinesvg](https://github.com/gilbarbara/react-inlinesvg/) for more info on react-inlinesvg
## Contribution
Yes you can contribute by sending a PR. Much code.
## License
MIT © [Oyetoke Toby](https://github.com/CITGuru)