svgit

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