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' { return <SVG ="50" ="New title" ="50" = /> }
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