tested and documented...

Author: Eduardo García Sanz

README.md

@@ -31,8 +31,9 @@ var browserify = require('browserify'),
 
 browserify({
     transform: [svgrt({
-		svgo : {}, // options passed to svgo
-		react: {}  // options passed to react-tools
+    	icon : true, // wrap it with a span with class "icon icon-filename"
+		svgo : {},   // options passed to svgo
+		react: {}    // options passed to react-tools
 	})]
 })
 .bundle()

index.js

@@ -1,4 +1,5 @@
 var through = require('through'),
+    path    = require('path'),
     extend  = require('extend'),
     SVGO    = require('svgo'),
     react   = require('react-tools'),
@@ -19,6 +20,18 @@ var isSVG = function (filename) {
     return (/\.svg$/i).test(filename);
 };
 
+var wrapScript = function (filename, data) {
+
+    return 'module.exports = require("react").createClass({render: function () { return (' + data + '); }});';
+};
+
+var wrapSpan = function (filename, data) {
+
+    return wrapScript(filename, '<span class="icon icon-' + path.basename(filename, '.svg') + '">' + data + '</span>');
+};
+
+var wrap = wrapScript;
+
 var transform = function (filename) {
 
     var write = function (buffer) {
@@ -33,7 +46,7 @@ var transform = function (filename) {
 
     var out = function (svg) {
 
-        var source = 'module.exports = require("react").createClass({render: function () { return (' + svg.data + '); }});',
+        var source = wrap(filename, svg.data),
             output = react.transform(source, settings.react);
 
         stream.queue(output);
@@ -58,5 +71,10 @@ module.exports = function (a) {
 
     svgo = new SVGO(settings.svgo);
 
+    if (a.icon) {
+
+        wrap = wrapSpan;
+    }
+
     return transform;
 };

package.json

@@ -4,7 +4,7 @@
   "homepage"       : "https://github.com/coma/svg-reactify",
   "repository"     : "https://github.com/coma/svg-reactify",
   "main"           : "./index.js",
-  "version"        : "0.4.0",
+  "version"        : "0.5.0",
   "license"        : "MIT",
   "private"        : false,
   "authors"        : [

test/main.js

@@ -41,7 +41,7 @@ describe('when passing a string', function () {
                         return;
                     }
 
-                    assert.strictEqual(output, 'module.exports = require(\"react\").createClass({render: function () { return (React.createElement(\"svg\", {viewBox: \"0 0 100 100\", xmlns: \"http://www.w3.org/2000/svg\"}, React.createElement(\"path\", {d: \"M0 0h100v100H0z\"}))); }});');
+                    assert.strictEqual(output, 'module.exports = require("react").createClass({render: function () { return (React.createElement("svg", {viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg"}, React.createElement("path", {d: "M0 0h100v100H0z"}))); }});');
                     done();
                 }
             };
@@ -51,4 +51,34 @@ describe('when passing a string', function () {
         svg.forEach(write);
         end();
     });
+
+    it('wraps the svg with a span to use them as icons', function (done) {
+
+        var write, end;
+
+        svgrt.__set__('through', function () {
+
+            assert.strictEqual(arguments.length, 2);
+
+            write = arguments[0];
+            end   = arguments[1];
+
+            return {
+                queue: function (output) {
+
+                    if (!output) {
+
+                        return;
+                    }
+
+                    assert.strictEqual(output, 'module.exports = require("react").createClass({render: function () { return (React.createElement("span", {class: "icon icon-foo"}, React.createElement("svg", {viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg"}, React.createElement("path", {d: "M0 0h100v100H0z"})))); }});');
+                    done();
+                }
+            };
+        });
+
+        svgrt({icon: true})('foo.svg');
+        svg.forEach(write);
+        end();
+    });
 });