Add iD.svg.Icon svg icon builder

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;
 }

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>

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);
+    };
+};

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>

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>

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>

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');
+    });
+});