From 44e3dd6853c7f27a097428629a7b6a4c0042bb4f Mon Sep 17 00:00:00 2001
From: Nicolas Froidure <nicolas.froidure@insertafter.com>
Date: Sat, 15 Jul 2017 13:17:56 +0200
Subject: [PATCH] fix(ScaledIcons): Icons using a scaled viewbow weren't
 rendering as expected

fix #73
---
 src/index.js                                  | 40 +++++++++++----
 tests/expected/scaledicons.svg                | 15 ++++++
 tests/expected/test-codepoint.json            | 50 +++++++++++++++++++
 .../scaledicons/ic_search_black_48px.svg      |  4 ++
 tests/index.mocha.js                          |  9 ++++
 tests/results/scaledicons.svg                 | 15 ++++++
 6 files changed, 124 insertions(+), 9 deletions(-)
 create mode 100644 tests/expected/scaledicons.svg
 create mode 100644 tests/fixtures/scaledicons/ic_search_black_48px.svg
 create mode 100644 tests/results/scaledicons.svg

diff --git a/src/index.js b/src/index.js
index 52dfaef..989fc5b 100755
--- a/src/index.js
+++ b/src/index.js
@@ -188,20 +188,33 @@ function SVGIcons2SVGFontStream(options) {
         if('svg' === tag.name) {
           glyph.dX = 0;
           glyph.dY = 0;
+          glyph.scaleX = 1;
+          glyph.scaleY = 1;
           if('viewBox' in tag.attributes) {
             values = tag.attributes.viewBox.split(/\s*,*\s|\s,*\s*|,/);
             glyph.dX = parseFloat(values[0], 10);
             glyph.dY = parseFloat(values[1], 10);
             glyph.width = parseFloat(values[2], 10);
             glyph.height = parseFloat(values[3], 10);
+            if('width' in tag.attributes) {
+              glyph.scaleX = glyph.width /
+                parseFloat(tag.attributes.width, 10);
+              glyph.width = parseFloat(tag.attributes.width, 10);
+            }
+            if('height' in tag.attributes) {
+              glyph.scaleY = glyph.height /
+                parseFloat(tag.attributes.height, 10);
+              glyph.height = parseFloat(tag.attributes.height, 10);
+            }
+          } else {
+            if('width' in tag.attributes) {
+              glyph.width = parseFloat(tag.attributes.width, 10);
+            }
+            if('height' in tag.attributes) {
+              glyph.height = parseFloat(tag.attributes.height, 10);
+            }
           }
-          if('width' in tag.attributes) {
-            glyph.width = parseFloat(tag.attributes.width, 10);
-          }
-          if('height' in tag.attributes) {
-            glyph.height = parseFloat(tag.attributes.height, 10);
-          }
-          if(!glyph.width || !glyph.height) {
+          if((!glyph.width) || !glyph.height) {
             log('Glyph "' + glyph.name + '" has no size attribute on which to' +
               ' get the gylph dimensions (heigh and width or viewBox' +
               ' attributes)');
@@ -336,8 +349,17 @@ function SVGIcons2SVGFontStream(options) {
           .toAbs()
           .translate(-glyph.dX, -glyph.dY)
           .scale(
-            options.normalize ? ratio : 1,
-            options.normalize ? ratio : 1)
+            (
+              options.normalize ?
+              ratio :
+              1
+            ) * glyph.scaleX,
+            (
+              options.normalize ?
+              ratio :
+              1
+            ) * glyph.scaleY
+          )
           .ySymetry(glyph.height - options.descent)
           .round(options.round)
           .encode();
diff --git a/tests/expected/scaledicons.svg b/tests/expected/scaledicons.svg
new file mode 100644
index 0000000..a2338cf
--- /dev/null
+++ b/tests/expected/scaledicons.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?> 
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+  <font id="plop" horiz-adv-x="48">
+    <font-face font-family="scaledicons"
+      units-per-em="48" ascent="48"
+      descent="0" />
+    <missing-glyph horiz-adv-x="0" />
+    <glyph glyph-name="ic_search_black_48px"
+      unicode="&#xE001;"
+      horiz-adv-x="48" d="M25.8775 41H25.4825L25.3425 41.135C25.8325 41.705 26.1275 42.445 26.1275 43.25C26.1275 45.045 24.6725 46.5 22.8775 46.5S19.6275 45.045 19.6275 43.25S21.0825 40 22.8775 40C23.6825 40 24.4225 40.295 24.9925 40.785L25.1275 40.645V40.25L27.6275 37.755L28.3725 38.5L25.8775 41zM22.8775 41C21.6325 41 20.6275 42.005 20.6275 43.25S21.6325 45.5 22.8775 45.5S25.1275 44.495 25.1275 43.25S24.1225 41 22.8775 41z" />
+  </font>
+</defs>
+</svg>
diff --git a/tests/expected/test-codepoint.json b/tests/expected/test-codepoint.json
index 2bf338f..5cdb99f 100644
--- a/tests/expected/test-codepoint.json
+++ b/tests/expected/test-codepoint.json
@@ -4,6 +4,8 @@
         "unicode": ["\uE001"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150
     }, {
@@ -11,6 +13,8 @@
         "unicode": ["\uE002"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "#0F9925"
@@ -19,6 +23,8 @@
         "unicode": ["\uE003"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "black"
@@ -27,6 +33,8 @@
         "unicode": ["\uE004"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "red"
@@ -35,6 +43,8 @@
         "unicode": ["\uE005"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "blue"
@@ -43,6 +53,8 @@
         "unicode": ["\uE006"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "#F9CE42"
@@ -51,6 +63,8 @@
         "unicode": ["\uE007"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "purple"
@@ -59,6 +73,8 @@
         "unicode": ["\uE008"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150
     }, {
@@ -66,6 +82,8 @@
         "unicode": ["\uE009"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "#F0F"
@@ -74,6 +92,8 @@
         "unicode": ["\uE00A"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "black"
@@ -83,6 +103,8 @@
         "unicode": ["\uE001"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "yellow"
@@ -91,6 +113,8 @@
         "unicode": ["\uE002"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "black"
@@ -100,6 +124,8 @@
         "unicode": ["\uE001"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 439,
         "height": 1024,
         "color": "black"
@@ -108,6 +134,8 @@
         "unicode": ["\uE002"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 439,
         "height": 1024
     }, {
@@ -115,6 +143,8 @@
         "unicode": ["\uE003"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 511.9057,
         "height": 1024,
         "color": "#0F0"
@@ -124,6 +154,8 @@
         "unicode": ["\uE008"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "green"
@@ -132,6 +164,8 @@
         "unicode": ["\uE00F"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "black"
@@ -140,6 +174,8 @@
         "unicode": ["\uE013"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "#0F0F0F"
@@ -148,6 +184,8 @@
         "unicode": ["\uE014"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "#F4F4F4"
@@ -157,6 +195,8 @@
         "unicode": ["\uE001"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "red"
@@ -165,6 +205,8 @@
         "unicode": ["\uE002"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "#1F1F1F"
@@ -173,6 +215,8 @@
         "unicode": ["\uE003"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150,
         "color": "#8F8F8F"
@@ -181,6 +225,8 @@
         "unicode": ["\uE004"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150
     }, {
@@ -188,6 +234,8 @@
         "unicode": ["\uE005"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150
     }, {
@@ -195,6 +243,8 @@
         "unicode": ["\uE006"],
         "dX": 0,
         "dY": 0,
+        "scaleX": 1,
+        "scaleY": 1,
         "width": 150,
         "height": 150
     }]
diff --git a/tests/fixtures/scaledicons/ic_search_black_48px.svg b/tests/fixtures/scaledicons/ic_search_black_48px.svg
new file mode 100644
index 0000000..c4494f7
--- /dev/null
+++ b/tests/fixtures/scaledicons/ic_search_black_48px.svg
@@ -0,0 +1,4 @@
+<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/tests/index.mocha.js b/tests/index.mocha.js
index de615b6..bf4d44b 100755
--- a/tests/index.mocha.js
+++ b/tests/index.mocha.js
@@ -171,6 +171,15 @@ describe('Generating fonts to files', function() {
     }, done, 'id');
   });
 
+  it('should work with scaled icons', function(done) {
+    generateFontToFile({
+      fontName: 'scaledicons',
+      fixedWidth: true,
+      centerHorizontally: true,
+      fontId: 'plop',
+    }, done);
+  });
+
   it('should not display hidden pathes', function(done) {
     generateFontToFile({
       fontName: 'hiddenpathesicons',
diff --git a/tests/results/scaledicons.svg b/tests/results/scaledicons.svg
new file mode 100644
index 0000000..a2338cf
--- /dev/null
+++ b/tests/results/scaledicons.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?> 
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+  <font id="plop" horiz-adv-x="48">
+    <font-face font-family="scaledicons"
+      units-per-em="48" ascent="48"
+      descent="0" />
+    <missing-glyph horiz-adv-x="0" />
+    <glyph glyph-name="ic_search_black_48px"
+      unicode="&#xE001;"
+      horiz-adv-x="48" d="M25.8775 41H25.4825L25.3425 41.135C25.8325 41.705 26.1275 42.445 26.1275 43.25C26.1275 45.045 24.6725 46.5 22.8775 46.5S19.6275 45.045 19.6275 43.25S21.0825 40 22.8775 40C23.6825 40 24.4225 40.295 24.9925 40.785L25.1275 40.645V40.25L27.6275 37.755L28.3725 38.5L25.8775 41zM22.8775 41C21.6325 41 20.6275 42.005 20.6275 43.25S21.6325 45.5 22.8775 45.5S25.1275 44.495 25.1275 43.25S24.1225 41 22.8775 41z" />
+  </font>
+</defs>
+</svg>