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.

Use as a node module

var svgtojsx = require('svg-to-jsx');
var svg = '<svg version="1.1"><path id="myPath" style="font-family: Verdana; margin-bottom: 10px; -webkit-transition: all; ms-transition: all;"/></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.

Use from command line

# To output JSX to stdout
$ svg-to-jsx <path to an SVG file>

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

# To output to file
$ svg-to-jsx -o <path to JSX file> <path to an SVG file>

Notes

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

Suppose you have an SVG file with following structure:

<polygon id="mask-path" points="497,129 537.1,135.3 494.4,215.8"/>
<clipPath id="mask">
    <use xlink:href="#mask-path" overflow="visible"/>
</clipPath>
<g id="group" clip-path="url(#mask)">
	<!-- Group contents -->
</g>

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

<polygon id="mask-path" points="497,129 537.1,135.3 494.4,215.8"/>
<clipPath id="mask">
	<polygon points="497,129 537.1,135.3 494.4,215.8"/>
</clipPath>
<g id="group" clip-path="url(#mask)">
	<!-- Group contents -->
</g>

Testing

To run unit test just execute

npm test