working and tested...

Author: Eduardo García Sanz

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["react", "es2015"]
+}

.eslintrc

@@ -0,0 +1,19 @@
+{
+    "parser": "babel-eslint",
+    "rules" : {
+        "strict"                     : 0,
+        "new-cap"                    : 0,
+        "eqeqeq"                     : 2,
+        "curly"                      : 2,
+        "quotes"                     : [
+            1,
+            "single"
+        ],
+        "no-unreachable"             : 2,
+        "space-before-blocks"        : 2,
+        "space-before-function-paren": 2,
+        "no-multi-spaces"            : 0,
+        "key-spacing"                : 0,
+        "no-mixed-requires"          : 0
+    }
+}

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+/lib

.npmignore

@@ -0,0 +1,6 @@
+/src
+/test
+.babelrc
+.eslintrc
+.gitignore
+.travis.yml

.travis.yml

@@ -1,6 +1,4 @@
 language: node_js
-node_js :
-- "iojs"
 deploy:
   provider: npm
   email: [email protected]

index.js

@@ -1,68 +1,58 @@
 {
-    "name"           : "svg-reactify",
-    "description"    : "transform SVG files into React elements",
-    "homepage"       : "https://github.com/coma/svg-reactify",
-    "repository"     : "https://github.com/coma/svg-reactify",
-    "main"           : "./index.js",
-    "version"        : "1.1.1",
-    "license"        : "MIT",
-    "private"        : false,
-    "author"         : "Eduardo García Sanz <[email protected]>",
-    "contributors"   : [
+    "name"            : "svg-reactify",
+    "description"     : "transform SVG files into React elements",
+    "homepage"        : "https://github.com/coma/svg-reactify",
+    "repository"      : {
+        "type": "git",
+        "url" : "git://github.com/coma/svg-reactify.git"
+    },
+    "version"         : "2.0.0",
+    "main"            : "lib",
+    "license"         : "MIT",
+    "private"         : false,
+    "author"          : "Eduardo García Sanz <[email protected]>",
+    "contributors"    : [
         "Matthew Brandly <[email protected]>",
         "Anders Stalheim Øfsdahl <https://github.com/andersaloof>"
     ],
-    "keywords"       : [
+    "keywords"        : [
         "browserify",
         "react",
         "reactjs",
         "svg",
         "browserify-transform"
     ],
-    "dependencies"   : {
-        "through"          : "2.3",
-        "react"            : "0.14",
-        "react-addons-test-utils": "0.14",
-        "babel"            : "5.8",
-        "svgo"             : "0.5",
-        "extend"           : "3.0",
-        "underscore.string": "3.2"
+    "dependencies"    : {
+        "babel-core"         : "6.5",
+        "babel-preset-react" : "6.5",
+        "lodash.camelcase"   : "4.1",
+        "lodash.kebabcase"   : "4.0",
+        "svgo"               : "0.6",
+        "through2"           : "2.0"
     },
-    "devDependencies": {
-        "jsdom" : "5.4",
-        "mocha" : "2.2",
-        "should": "7.0",
-        "eslint": "1.1"
+    "peerDependencies": {
+        "react": "0.14"
     },
-    "scripts"        : {
-        "lint": "eslint index.js",
-        "test": "npm run lint && mocha"
+    "devDependencies" : {
+        "babel-cli"              : "6.5",
+        "babel-eslint"           : "5.0",
+        "babel-preset-es2015"    : "6.5",
+        "enzyme"                 : "2.0",
+        "eslint"                 : "2.2",
+        "react"                  : "0.14",
+        "react-addons-test-utils": "0.14",
+        "react-dom"              : "0.14",
+        "tape"                   : "4.4"
     },
-    "engines"        : {
-        "iojs": ">= 1.0.0",
-        "node": ">= 0.11.0"
+    "scripts"         : {
+        "clean"     : "rm -rf ./lib",
+        "lint"      : "eslint src",
+        "build"     : "npm run clean && babel src --out-dir lib",
+        "test"      : "babel-node test",
+        "fooo"      : "npm run lint && babel-node test && npm run build",
+        "prepublish": "npm test && npm run build"
     },
-    "eslintConfig"   : {
-        "env"         : {
-            "node": true
-        },
-        "rules"       : {
-            "strict"                     : 0,
-            "new-cap"                    : 0,
-            "eqeqeq"                     : 2,
-            "curly"                      : 2,
-            "quotes"                     : [
-                1,
-                "single"
-            ],
-            "no-unreachable"             : 2,
-            "space-before-blocks"        : 2,
-            "space-before-function-paren": 2,
-            "no-multi-spaces"            : 0,
-            "key-spacing"                : 0,
-            "no-mixed-requires"          : 0,
-            "no-use-before-define"       : 0,
-            "no-underscore-dangle"       : 0
-        }
+    "engines"         : {
+        "node": "> 4.0.0"
     }
 }

package.json

@@ -0,0 +1,73 @@
+import { basename }           from 'path';
+import { transform as babel } from 'babel-core';
+import react                  from 'babel-preset-react';
+import SVGO                   from 'svgo';
+import through                from 'through2';
+import camelCase              from 'lodash.camelcase';
+import kebabCase              from 'lodash.kebabcase';
+import template               from './template';
+
+const SVG_REGEX  = /\.svg$/i,
+      ATTR_REGEX = /(class|clip-path|fill-opacity|font-family|font-size|marker-end|marker-mid|marker-start|stop-color|stop-opacity|stroke-width|stroke-linecap|stroke-dasharray|stroke-opacity|text-anchor)=/g;
+
+const svgo = new SVGO({
+    plugins: [
+        {removeViewBox: false},
+        {removeUselessStrokeAndFill: false}
+    ]
+});
+
+const babelOptions = {
+    presets: [react]
+};
+
+function camelizeAttrs (code) {
+
+    return code.replace(ATTR_REGEX, (line, attr) => {
+
+        return attr !== 'class' ? camelCase(attr) + '=' : 'className='
+    });
+}
+
+function transform (code) {
+
+    return babel(camelizeAttrs(code), babelOptions).code;
+}
+
+function createTransformer (filename, template) {
+
+    const name = kebabCase(basename(filename, '.svg'));
+    
+    let buffer = '';
+
+    function handleStream (chunk, encoding, next) {
+
+        buffer += chunk.toString();
+        next();
+    }
+
+    function finishStream (next) {
+
+        svgo.optimize(buffer, svg => {
+
+            this.push(template(name, transform(svg.data)));
+            next();
+        });
+    }
+
+    return through(handleStream, finishStream);
+}
+
+export default (filename, options = {}) => {
+
+    if (!SVG_REGEX.test(filename)) {
+
+        return through();
+    }
+
+    const type = Object
+        .keys(template)
+        .find(t => options[t] && (new RegExp(options[t])).test(filename));
+
+    return  createTransformer(filename, template[type || options.default || 'icon']);
+};

src/index.js

@@ -0,0 +1,15 @@
+export default (name, svg) => `var React = require('react'), SVG = ${ svg }
+
+module.exports = React.createClass({
+    displayName: 'svg-${ name }',
+    getDefaultProps: function () {
+
+        return {
+            className: 'icon icon-${ name }'
+        };
+    },
+    render: function () {
+
+        return React.createElement('span', this.props, SVG);
+    }
+});`;

src/template/icon.js

@@ -0,0 +1,9 @@
+export default (name, svg) => `var React = require('react'), SVG = ${ svg }
+
+module.exports = React.createClass({
+    displayName: 'svg-${ name }',
+    render     : function () {
+
+        return SVG;
+    }
+});`;