Build Status Dependency Status NPM version
Transform SVG files into React elements.
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" }]
]
}
}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 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" }]
]
}
}This one has an <span class="icon icon-__FILENAME_IN_KEBABCASE__> as the root.
The default one, having the <svg> as the root.