svg-reactify

Transform SVG files into React elements.

Configuration

As with most browserify transforms, you can configure it via the second argument to bundle.transform:

bundle.transform(require('svg-reactify'), { default: 'image' });

or inside your package.json configuration:

{
    "browserify": {
        "transform": [
            ["svg-reactify", { "default": "image" }]
        ]
    }
}

Requiring SVG files

Now you can do things like...

var React = require('react'),
	SVG   = {
	    Dog   : require('images/dog.svg'),
	    Parrot: require('images/parrot.svg'),
	    Horse : require('images/horse.svg')
	};

module.exports = React.createClass({
    render: function () {
        return (
            <h2>Animals</h2>
			<ul>
				<li>
					<SVG.Dog/>
				</li>
				<li>
					<SVG.Parrot/>
				</li>
				<li>
					<SVG.Horse/>
				</li>
			</ul>
        );
    }
});

Templates

svg-reactify uses templates to produce the react components. Currently there are two templates available - image and icon. Maybe there will be more in the future, like one for symbols for example.

Choose the default template using the default option. You can also set a regex for choosing templates based on filename like:

{
    "browserify": {
        "transform": [
            ["svg-reactify", { "default": "image", "icon": "\.icon" }]
        ]
    }
}

This will use the image template by default and icon if the filename matches the regex \.icon. The other way around would be for example ["svg-reactify", { "default": "icon", "image": "\.image" }].

Icon Template

This template will produce a DOM tree looking like:

<span class="icon icon-__FILENAME_IN_KEBABCASE__">
   <svg .... />
</span>

The <span> element will also inherit any props given to the element, for example the following react element:

<SVG.Dog className="customClass" something="else"/>

... will override the default class and produce:

<span class="customClass" something="else">
   <svg .... />
</span>

You could then style the svg element further through CSS, for example:

.customClass > svg {
  width: 100px;
  height: 100px;
  fill: #00ff00;
}

Image Template

This template will produce a DOM tree containing only the SVG:

<svg .... />

It will NOT pass on any props given to the element, so you cannot set the className or such.