Skip to content
Customizeable SVG to React Component
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
README.md
package.json
rollup.config.js
yarn.lock

README.md

svgit

Customizeable SVG to React Component

NPM JavaScript Style Guide

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

You can’t perform that action at this time.