From 8589a368f899c413b6879de9d28255a49574906e Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <juanchiviotti@gmail.com>
Date: Fri, 30 Oct 2015 16:27:12 -0400
Subject: [PATCH] Load svgs inline to be able to style their colours

---
 bower.json                    |  1 -
 lib/components/hero-icon.html | 25 ++++++++++++++++++-------
 lib/images/burn.svg           |  2 +-
 lib/images/drive.svg          |  2 +-
 lib/images/image.svg          |  2 +-
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/bower.json b/bower.json
index 5780d07c..4fc8442c 100644
--- a/bower.json
+++ b/bower.json
@@ -15,7 +15,6 @@
     "tests"
   ],
   "dependencies": {
-    "iron-icon": "polymerelements/iron-icon#~1.0.7",
     "polymer": "Polymer/polymer#^1.1.0"
   }
 }
diff --git a/lib/components/hero-icon.html b/lib/components/hero-icon.html
index e03985f8..e275f969 100644
--- a/lib/components/hero-icon.html
+++ b/lib/components/hero-icon.html
@@ -1,20 +1,20 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="hero-caption.html">
 
 <dom-module id="hero-icon">
   <template>
     <style>
-      :host {
-        --iron-icon-height: 40px;
-        --iron-icon-width: 40px;
-      }
-
       :host ::content div {
         margin-top: 10px;
       }
+
+      :host ::content .icon {
+        margin: 0 auto;
+        height: 40px;
+        width: 40px;
+      }
     </style>
-    <iron-icon src="{{path}}"></iron-icon>
+    <div class="icon"></div>
 
     <div>
       <hero-caption>
@@ -24,12 +24,23 @@
   </template>
 
   <script>
+    var fs = require('fs');
+    var path = require('path');
+
     Polymer({
       is: "hero-icon",
       properties: {
         path: {
           type: String
         }
+      },
+      ready: function() {
+        var iconElement = this.querySelector('.icon');
+        var imagePath = path.join(__dirname, this.path);
+        var contents = fs.readFileSync(imagePath, {
+          encoding: 'utf8'
+        });
+        iconElement.innerHTML = contents;
       }
     });
   </script>
diff --git a/lib/images/burn.svg b/lib/images/burn.svg
index c4ca7193..31c58850 100644
--- a/lib/images/burn.svg
+++ b/lib/images/burn.svg
@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="999.944px" height="999.986px" viewBox="500.028 0 999.944 999.986" enable-background="new 500.028 0 999.944 999.986"
+	 viewBox="500.028 0 999.944 999.986" enable-background="new 500.028 0 999.944 999.986"
 	 xml:space="preserve">
 <g>
 	<g>
diff --git a/lib/images/drive.svg b/lib/images/drive.svg
index ad891e79..0269770f 100644
--- a/lib/images/drive.svg
+++ b/lib/images/drive.svg
@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="134.229px" height="134.229px" viewBox="0 0 134.229 134.229" enable-background="new 0 0 134.229 134.229"
+	 viewBox="0 0 134.229 134.229" enable-background="new 0 0 134.229 134.229"
 	 xml:space="preserve">
 <g>
 	<g>
diff --git a/lib/images/image.svg b/lib/images/image.svg
index f980c397..ccb8edef 100644
--- a/lib/images/image.svg
+++ b/lib/images/image.svg
@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="41px" height="41px" viewBox="0 0 41 41" enable-background="new 0 0 41 41" xml:space="preserve">
+	 viewBox="0 0 41 41" enable-background="new 0 0 41 41" xml:space="preserve">
 <g>
 	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M20.5,0C31.822,0,41,9.178,41,20.5S31.822,41,20.5,41
 		S0,31.822,0,20.5S9.178,0,20.5,0z"/>