svg-to-jsx


Simple module that consumes SVG and spits out JSX. As simple as that.

Hey! If you're using gulp you might find gulp-svg-to-jsx interesting. And if you're using webpack you might like svg-jsx-loader that wraps this module for use as a webpack loader.

Installation

svg-to-jsx is a node module. To install you have to have Node.js and NPM installed on your machine.

npm install svg-to-jsx

Usage

You can either use the module in your Node.js project or via command line.

$3

var svgtojsx = require('svg-to-jsx');
var svg = '';

// You can use svgtojsx with old school callbacks
svgtojsx(svg, function(error, jsx) {
// ...
});

// The returned object is a promise though, you might prefer that
svgtojsx(svg).then(function(jsx) {
// ...
});

#### Options

root String In case you only want to output single SVG element you can set this to its ID.

passProps Boolean Set this to true in case you want to pass props to the root element.

renderChildren Boolean|String Set this to true in case you want to render this.props.children in the root element. If set to string value, this value is interpreted as an element ID and children are rendered into this element. If element already has some text content children are appended to the end.

refs Object In case you want to be able to access specific elements from your SVG file, you can add refs to them. This object's keys are IDs of elements that will be assigned refs, the values are the ref names, for example:

{
mySvgElement: 'refToMySvgElement'
}

will result in element with ID mySvgElement to be accessible via this.refs.refToMySvgElement.

$3

# To output JSX to stdout
$ svg-to-jsx

# To display usage info
$ svg-to-jsx --help
$ svg-to-jsx -h

# To output to file
$ svg-to-jsx -o

Notes

tags are not allowed in JSX. The element referenced by a tag's xlink:href attribute is looked up, its id
is discarded, and it replaces the original tag.

Suppose you have an SVG file with following structure:

Then of course React won't support tags and you would end up unmasked #group. So the tags are replaced and you end up with following structure which is supported by React:

Testing

To run unit test just execute

npm test