Add an <svg-icon> component which renders SVG icons inline

Following the approach we have implemented for using <svg> icons on the
website without all of the hassle that comes with icon fonts, implement
an <svg-icon> component which renders icons as inline SVGs in the
client and add the 'refresh' icon for use in the top bar.

h/static/images/icons/refresh.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" fill="#FFFFFF">
+            <path d="M7.58578644,4 L6,4 L6,6 L7.58578644,6 L6.29289322,7.29289322 L5.58578644,8 L7,9.41421356 L7.70710678,8.70710678 L10.7071068,5.70710678 L11.4142136,5 L11.0606602,4.64644661 L10.7071068,4.29289322 L7.70710678,1.29289322 L7,0.585786438 L5.58578644,2 L6.29289322,2.70710678 L7.58578644,4 Z M6,4 L6,6 C6,6 2,6 2,10 C2,10 2,14 6,14 C6,14 10,14 10,10 C10,10 12,10 12,10 C12,10 12,16 6,16 C6,16 0,16 0,10 C0,10 0,4 6,4 Z" id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

h/static/scripts/app.js

@@ -162,6 +162,7 @@ module.exports = angular.module('h', [
   .directive('sortDropdown', require('./directive/sort-dropdown'))
   .directive('spinner', require('./directive/spinner'))
   .directive('statusButton', require('./directive/status-button'))
+  .directive('svgIcon', require('./directive/svg-icon'))
   .directive('tagEditor', require('./directive/tag-editor'))
   .directive('threadList', require('./directive/thread-list'))
   .directive('timestamp', require('./directive/timestamp'))

h/static/scripts/directive/svg-icon.js

+'use strict';
+
+/**
+ * The <svg-icon> component renders SVG icons using inline <svg> tags,
+ * enabling their appearance to be customized via CSS.
+ *
+ * This matches the way we do icons on the website, see
+ * https://github.com/hypothesis/h/pull/3675
+ */
+
+// The list of supported icons
+var icons = {
+  refresh: require('../../images/icons/refresh.svg'),
+};
+
+// @ngInject
+function SvgIconController($element) {
+  if (!icons[this.name]) {
+    throw new Error('Unknown icon: ' + this.name);
+  }
+  $element[0].innerHTML = icons[this.name];
+}
+
+module.exports = function () {
+  return {
+    bindToController: true,
+    controllerAs: 'vm',
+    restrict: 'E',
+    controller: SvgIconController,
+    scope: {
+      /** The name of the icon to load. */
+      name: '<',
+    },
+  };
+};

h/static/scripts/directive/test/svg-icon-test.js

+'use strict';
+
+var angular = require('angular');
+
+var util = require('./util');
+
+describe('svgIcon', function () {
+  before(function () {
+    angular.module('app', [])
+      .directive('svgIcon', require('../svg-icon'));
+  });
+
+  beforeEach(function () {
+    angular.mock.module('app');
+  });
+
+  it("sets the element's content to the content of the SVG", function () {
+    var el = util.createDirective(document, 'svgIcon', {name: 'refresh'});
+    assert.ok(el[0].querySelector('svg'));
+  });
+
+  it('throws an error if the icon is unknown', function () {
+    assert.throws(function () {
+      util.createDirective(document, 'svgIcon', {name: 'unknown'});
+    });
+  });
+});

package.json

@@ -103,7 +103,8 @@
         {
           "appliesTo": {
             "includeExtensions": [
-              ".html"
+              ".html",
+              ".svg"
             ]
           }
         }