svgit
v1.0.1
Published
Customizeable SVG to React Component
Downloads
4
Readme
svgit
Customizeable SVG to React Component
This is a simple react library built on 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
npm install --save svgit
Usage
import React, { Component } from 'react'
import SVG from 'svgit'
class Example extends Component {
render () {
return (
<SVG width="50" title="New title" height="50" selectors={{index:1, attrs: { width: "20", height: "30" }}} />
)
}
}
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:
{
...,
isHttpError: bool,
status: number
}
- or an
InlineSVGError
, which has the following properties:
{
name: 'InlineSVGError',
isSupportedBrowser: bool,
isConfigurationError: bool,
isUnsupportedBrowserError: bool,
message: string
}
You should head over to react-inlinesvg for more info on react-inlinesvg
Contribution
Yes you can contribute by sending a PR. Much code.
License
MIT © Oyetoke Toby