From 3af17cb011a5520038769e684b1e4eabc5855a2f Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Fri, 30 Oct 2015 14:00:36 -0400
Subject: [PATCH] Add iD.svg.Icon svg icon builder

---
 css/app.css              | 13 +++++--------
 index.html               |  1 +
 js/id/svg/icon.js        | 11 +++++++++++
 test/index.html          |  3 +++
 test/index_packaged.html |  1 +
 test/rendering.html      |  1 +
 test/spec/svg/icon.js    | 13 +++++++++++++
 7 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 js/id/svg/icon.js
 create mode 100644 test/spec/svg/icon.js

diff --git a/css/app.css b/css/app.css
index f941353f0..e6173534c 100644
--- a/css/app.css
+++ b/css/app.css
@@ -481,13 +481,9 @@ button.save.has-count .count::before {
 /* Icons */
 
 .icon {
-  display:inline-block;
-  vertical-align:top;
-  width:20px;
-  height:20px;
-  background:transparent url(img/iD-sprite.svg) no-repeat 0 0;
-  text-indent:-9999px;
-  overflow:hidden;
+  vertical-align: top;
+  width: 20px;
+  height: 20px;
 }
 
 .icon-pre-text {
@@ -2293,12 +2289,13 @@ div.full-screen > button:hover {
     display: table-cell;
     vertical-align: bottom;
     width: 250px;
-    height: 30px;
+    max-height: 30px;
     float: left;
     clear: left;
 }
 
 #info-block {
+    max-height: 30px;
     float: right;
     clear: right;
 }
diff --git a/index.html b/index.html
index 2e801e4d9..f7de9a3d1 100644
--- a/index.html
+++ b/index.html
@@ -65,6 +65,7 @@
         <script src="js/id/svg.js"></script>
         <script src="js/id/svg/areas.js"></script>
         <script src="js/id/svg/defs.js"></script>
+        <script src="js/id/svg/icon.js"></script>
         <script src="js/id/svg/labels.js"></script>
         <script src="js/id/svg/lines.js"></script>
         <script src="js/id/svg/midpoints.js"></script>
diff --git a/js/id/svg/icon.js b/js/id/svg/icon.js
new file mode 100644
index 000000000..7195e8136
--- /dev/null
+++ b/js/id/svg/icon.js
@@ -0,0 +1,11 @@
+iD.svg.Icon = function(name) {
+    return function (selection) {
+        selection.selectAll('icon')
+            .data([0])
+            .enter()
+            .append('svg')
+            .attr('class','icon')
+            .append('use')
+            .attr('xlink:href', name);
+    };
+};
diff --git a/test/index.html b/test/index.html
index 9a38b2222..d551f6667 100644
--- a/test/index.html
+++ b/test/index.html
@@ -61,6 +61,8 @@
 
     <script src="../js/id/svg.js"></script>
     <script src="../js/id/svg/areas.js"></script>
+    <script src="../js/id/svg/defs.js"></script>
+    <script src="../js/id/svg/icon.js"></script>
     <script src="../js/id/svg/labels.js"></script>
     <script src="../js/id/svg/lines.js"></script>
     <script src="../js/id/svg/midpoints.js"></script>
@@ -280,6 +282,7 @@
 
     <script src="spec/svg.js"></script>
     <script src="spec/svg/areas.js"></script>
+    <script src="spec/svg/icon.js"></script>
     <script src="spec/svg/lines.js"></script>
     <script src="spec/svg/midpoints.js"></script>
     <script src="spec/svg/points.js"></script>
diff --git a/test/index_packaged.html b/test/index_packaged.html
index e3ea2f00c..5af0b5d99 100644
--- a/test/index_packaged.html
+++ b/test/index_packaged.html
@@ -80,6 +80,7 @@
 
     <script src="spec/svg.js"></script>
     <script src="spec/svg/areas.js"></script>
+    <script src="spec/svg/icon.js"></script>
     <script src="spec/svg/lines.js"></script>
     <script src="spec/svg/midpoints.js"></script>
     <script src="spec/svg/points.js"></script>
diff --git a/test/rendering.html b/test/rendering.html
index 2740f11c6..c9f97bdd6 100644
--- a/test/rendering.html
+++ b/test/rendering.html
@@ -19,6 +19,7 @@
 
     <script src="../js/id/svg.js"></script>
     <script src="../js/id/svg/areas.js"></script>
+    <script src="../js/id/svg/icon.js"></script>
     <script src="../js/id/svg/lines.js"></script>
     <script src="../js/id/svg/midpoints.js"></script>
     <script src="../js/id/svg/points.js"></script>
diff --git a/test/spec/svg/icon.js b/test/spec/svg/icon.js
new file mode 100644
index 000000000..bd4c22713
--- /dev/null
+++ b/test/spec/svg/icon.js
@@ -0,0 +1,13 @@
+describe("iD.svg.Icon", function () {
+    var selection;
+
+    beforeEach(function () {
+        selection = d3.select(document.createElement('div'));
+    });
+
+    it("creates an SVG icon", function () {
+        selection.call(iD.svg.Icon('#icon-bug'));
+        expect(selection.select('svg')).to.be.classed('icon');
+        expect(selection.select('use').attr('xlink:href')).to.eql('#icon-bug');
+    });
+});