tested and documented...

Author: Eduardo García Sanz

.travis.yml

@@ -0,0 +1,12 @@
+language: node_js
+node_js :
+- "0.11"
+- "iojs"
+deploy:
+  provider: npm
+  email: eduardo@comakai.com
+  api_key:
+    secure: JX1zgdfsP3rwISjl2mn6LNFOwNYcy2XIuL1mHXhAllDE5utvvaum8/zt/PWuBY7qlocGN8NZfjDsWc3PlDiezs9o0JZ0y0ipBgcPLPJJqbXc6U5EIVAUwnOMs7HorF1yz4S5T4GfBWwWfhFPr3setSHmRDTKyjmUBUqnvUj9Pq8=
+  on:
+    tags: true
+    repo: coma/svg-reactify

README.md

@@ -1,2 +1,72 @@
-# svg-reactify
-transform SVG files into React elements
+svg-reactify
+============
+
+[![Build Status](https://travis-ci.org/coma/svg-reactify.png?branch=master)](https://travis-ci.org/coma/svg-reactify)
+[![Dependency Status](https://david-dm.org/coma/svg-reactify.png)](http://david-dm.org/coma/svg-reactify)
+[![NPM version](https://badge.fury.io/js/svg-reactify.png)](http://badge.fury.io/js/svg-reactify)
+![io.js supported](https://img.shields.io/badge/io.js-supported-green.svg?style=flat)
+
+Transform SVG files into React elements.
+
+Setup
+-----
+
+Without configuration...
+
+```javascript
+var browserify = require('browserify'),
+    svgrt      = require('svg-reactify');
+
+browserify({
+    transform: [svgrt]
+})
+.bundle()
+```
+
+and with some configuration...
+
+```javascript
+var browserify = require('browserify'),
+    svgrt      = require('svg-reactify');
+
+browserify({
+    transform: [svgrt({
+		svgo : {}, // options passed to svgo
+		react: {}  // options passed to react-tools
+	})]
+})
+.bundle()
+```
+
+Requiring SVG files
+-------------------
+
+Now you can do things like...
+
+```javascript
+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>
+        );
+    }
+});
+```

index.js

@@ -1,9 +1,8 @@
 var through = require('through'),
     extend  = require('extend'),
     SVGO    = require('svgo'),
-    react   = require('react-tools');
-
-var svgo = new SVGO();
+    react   = require('react-tools'),
+    svgo    = new SVGO();
 
 var settings = {
     react: {
@@ -12,7 +11,7 @@ var settings = {
         stripTypes: false,
         harmony   : false
     },
-    svgo: {}
+    svgo : {}
 };
 
 var isSVG = function (filename) {
@@ -34,7 +33,7 @@ var transform = function (filename) {
 
     var out = function (svg) {
 
-        var source = "var React = require('react');module.exports = React.createClass({render: function () { return (" + svg.data + "); }});",
+        var source = 'module.exports = require("react").createClass({render: function () { return (' + svg.data + '); }});',
             output = react.transform(source, settings.react);
 
         stream.queue(output);

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.3.0",
+  "version"        : "0.4.0",
   "license"        : "MIT",
   "private"        : false,
   "authors"        : [
@@ -22,7 +22,18 @@
       "svgo"       : "^0.5",
       "extend"     : "^2"
   },
-  "devDependencies": {},
-  "scripts"        : {},
-  "engines"        : {}
+  "devDependencies": {
+      "jshint"        : "^2",
+      "jshint-stylish": "^1",
+      "mocha"         : "^2",
+      "rewire"        : "^2"
+  },
+  "scripts"           : {
+    "lint": "jshint --verbose --reporter node_modules/jshint-stylish/stylish.js index.js",
+    "test": "npm run lint && mocha test"
+  },
+  "engines"        : {
+    "iojs"         : ">= 1.0.0",
+    "node"         : ">= 0.11.0"
+  }
 }

test/main.js

@@ -0,0 +1,54 @@
+var rewire = require('rewire'),
+    assert = require('assert'),
+    svgrt  = rewire('..');
+
+var svg = [
+    '<?xml version="1.0" encoding="utf-8"?>',
+    '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">',
+    '   <rect x="0" y="0" width="100" height="100"/>',
+    '</svg>'
+];
+
+describe('when passing a string', function () {
+
+    it('won\'t do anything if it isn\'t a SVG file', function (done) {
+
+        svgrt.__set__('through', function () {
+
+            assert.strictEqual(arguments.length, 0);
+            done();
+        });
+
+        svgrt('foo.png');
+    });
+
+    it('will work for a SVG file', 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(\"svg\", {viewBox: \"0 0 100 100\", xmlns: \"http://www.w3.org/2000/svg\"}, React.createElement(\"path\", {d: \"M0 0h100v100H0z\"}))); }});');
+                    done();
+                }
+            };
+        });
+
+        svgrt('foo.svg');
+        svg.forEach(write);
+        end();
+    });
+});