svg-reactify

    2.0.0 • Public • Published

    svg-reactify

    Build Status Dependency Status NPM version

    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

    Templates are a way of ease the use of your svg's and there are three (maybe there will be more in the future, like one for symbols for example).

    All the templates inherit props to allow passing things like className, id...

    You can select one type as default by setting the default option to image or to icon and also setting a regex string like:

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

    Icon Template

    This one has an <span class="icon icon-__FILENAME_IN_KEBABCASE__> as the root.

    Image Template

    The default one, having the <svg> as the root.

    Install

    npm i svg-reactify

    DownloadsWeekly Downloads

    20

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • coma