Merge pull request #3 from andersaloof/master

Prevents stripping of dashed attributes and camelCases them

Author: coma

index.js

@@ -12,7 +12,15 @@ var templates = ['all', 'svg', 'icon'],
 
 var settings = {
     babel: {},
-    svgo : {}
+    svgo : {
+        plugins: [
+            {
+                removeViewBox: false
+            }, {
+                removeUselessStrokeAndFill: false
+            }
+        ]
+    }
 };
 
 var isSVG = function (filename) {
@@ -42,12 +50,10 @@ var type     = 'svg',
 var transform = function (filename) {
 
     var write = function (buffer) {
-
         data += buffer;
     };
 
     var end = function () {
-
         svgo.optimize(data, out);
     };
 
@@ -56,6 +62,14 @@ var transform = function (filename) {
         var source = render(filename, svg.data),
             output = babel.transform(source, settings.babel);
 
+        var replaceAttribute = function (a, str) {
+          return str.replace(/-(.)/g, function (_, letter) {
+            return letter.toUpperCase();
+          });
+        };
+
+        output.code = output.code.replace(/\"(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, replaceAttribute);
+
         stream.queue(output.code);
         stream.queue(null);
     };

package.json

@@ -20,6 +20,7 @@
     "dependencies"   : {
         "through"          : "2.3",
         "react"            : "0.14",
+        "react-addons-test-utils": "0.14",
         "babel"            : "5.8",
         "svgo"             : "0.5",
         "extend"           : "3.0",

test/main.js

@@ -1,5 +1,5 @@
-var React     = require('react/addons'),
-    TestUtils = React.addons.TestUtils,
+var React     = require('react'),
+    TestUtils = require('react-addons-test-utils'),
     fs        = require('fs'),
     vm        = require('vm'),
     path      = require('path'),
@@ -160,4 +160,20 @@ describe('The app', function () {
         template: 'all',
         type    : 'icon'
     }));
-});
+
+    it('should work for all template and camelize dashed element attributes', load('some.svg', function (svg) {
+
+        var component = React.createElement(svg, {
+                type: 'svg'
+            }),
+            rendered  = TestUtils.renderIntoDocument(component),
+            path      = TestUtils.findRenderedDOMComponentWithTag(rendered, 'path');
+
+        (rendered.getDOMNode().tagName.toLowerCase()).should.equal('svg');
+        (rendered.getDOMNode().querySelector('path').getAttribute('d')).should.equal('M0 0h100v100H0z');
+        (rendered.getDOMNode().querySelector('path').getAttribute('stroke-width')).should.equal('2.5');
+        (rendered.getDOMNode().querySelector('path').getAttribute('clip-path')).should.equal('something');
+    }, {
+        template: 'all'
+    }));
+});