react-transform-svgify

Transform SVG files into React elements.

This is a fork of svg-reactify

Configuration

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

bundle.transform(require('react-transform-svgify'), { default: 'image' });

or inside your package.json configuration:

{
    "browserify": {
        "transform": [
            ["react-transform-svgify", { "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

react-transform-svgify 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": [
            ["react-transform-svgify", { "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 ["react-transform-svgify", { "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.