Add additional icons for use in new groups menu

Add new icons for the new menu component and the new groups menu. Also
add a `size` prop to the `SvgIcon` component so that icons can be sized
appropriately for usage in a given context.

src/images/icons/add-group.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M8 0c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm4.645 8.903V7.097a.388.388 0 0 0-.387-.387H9.29V3.742a.388.388 0 0 0-.387-.387H7.097a.388.388 0 0 0-.387.387V6.71H3.742a.388.388 0 0 0-.387.387v1.806c0 .213.174.387.387.387H6.71v2.968c0 .213.174.387.387.387h1.806a.388.388 0 0 0 .387-.387V9.29h2.968a.388.388 0 0 0 .387-.387z"/>
+</svg>
\ No newline at end of file

src/images/icons/collapse-menu.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M7.456 4.212a.804.804 0 0 1 1.088 0l6.23 5.867c.301.283.301.742 0 1.025l-.726.684a.804.804 0 0 1-1.087.001L8 7.139l-4.961 4.65a.804.804 0 0 1-1.087-.001l-.727-.684a.695.695 0 0 1 0-1.025l6.23-5.867z"/>
+</svg>
\ No newline at end of file

src/images/icons/copy.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M14.56 2.06c.243.243.44.718.44 1.061V11.5a1.5 1.5 0 0 1-1.5 1.5H11v1.5A1.5 1.5 0 0 1 9.5 16h-7A1.5 1.5 0 0 1 1 14.5v-10A1.5 1.5 0 0 1 2.5 3H5V1.5A1.5 1.5 0 0 1 6.5 0h5.379c.343 0 .818.197 1.06.44l1.622 1.62zM9.313 14.5a.188.188 0 0 0 .188-.188V13h-3A1.5 1.5 0 0 1 5 11.5v-7H2.687a.188.188 0 0 0-.187.187v9.625c0 .104.084.188.187.188h6.625zm4-3a.188.188 0 0 0 .188-.188V5h-2.75a.75.75 0 0 1-.75-.75V1.5H6.687a.188.188 0 0 0-.187.187v9.625c0 .104.084.188.187.188h6.625zm.188-8v-.301a.215.215 0 0 0-.055-.133l-1.511-1.511A.188.188 0 0 0 11.8 1.5H11.5v2h2z"/>
+</svg>
\ No newline at end of file

src/images/icons/expand-menu.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M7.456 11.788L1.226 5.92a.695.695 0 0 1 0-1.025l.726-.684a.804.804 0 0 1 1.087-.001L8 8.861l4.961-4.65a.804.804 0 0 1 1.087.001l.727.684c.3.283.3.742 0 1.025l-6.23 5.867a.804.804 0 0 1-1.09 0z"/>
+</svg>
\ No newline at end of file

src/images/icons/leave.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M8 0c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm0 14.452A6.45 6.45 0 0 0 14.452 8 6.45 6.45 0 0 0 8 1.548 6.45 6.45 0 0 0 1.548 8 6.45 6.45 0 0 0 8 14.452zm3.284-8.458L9.277 8l2.007 2.006a.387.387 0 0 1 0 .549l-.73.729a.387.387 0 0 1-.548 0L8 9.277l-2.006 2.007a.387.387 0 0 1-.549 0l-.729-.73a.387.387 0 0 1 0-.548L6.723 8 4.716 5.994a.387.387 0 0 1 0-.549l.73-.729a.387.387 0 0 1 .548 0L8 6.723l2.006-2.007a.387.387 0 0 1 .549 0l.729.73a.387.387 0 0 1 0 .548z"/>
+</svg>
\ No newline at end of file

src/images/icons/share.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#000" fill-rule="nonzero" d="M16 1.656v3.5c0 .587-.721.874-1.138.464l-.992-.977-6.764 6.66a.674.674 0 0 1-.943 0l-.629-.62a.649.649 0 0 1 0-.927l6.765-6.66-.992-.976c-.419-.412-.122-1.12.471-1.12h3.555c.369 0 .667.294.667.656zm-4.694 6.749c.42-.414 1.138-.121 1.138.464v4.819c0 .724-.597 1.312-1.333 1.312H1.333A1.323 1.323 0 0 1 0 13.687V4.063C0 3.338.597 2.75 1.333 2.75h8.223c.593 0 .89.707.47 1.12l-.444.438a.772.772 0 0 1-.47.192H1.777v8.75h8.889V9.306c0-.15.087-.358.195-.464l.444-.437z"/>
+</svg>
\ No newline at end of file

src/sidebar/components/svg-icon.js

 'use strict';
 
 const { createElement } = require('preact');
+const { useLayoutEffect, useRef } = require('preact/hooks');
 const propTypes = require('prop-types');
 
 // The list of supported icons
 const icons = {
-  refresh: require('../../images/icons/refresh.svg'),
+  'add-group': require('../../images/icons/add-group.svg'),
+  'collapse-menu': require('../../images/icons/collapse-menu.svg'),
+  'expand-menu': require('../../images/icons/expand-menu.svg'),
+  copy: require('../../images/icons/copy.svg'),
   cursor: require('../../images/icons/cursor.svg'),
+  leave: require('../../images/icons/leave.svg'),
+  refresh: require('../../images/icons/refresh.svg'),
+  share: require('../../images/icons/share.svg'),
 };
 
 /**
@@ -16,17 +23,30 @@ const icons = {
  * This matches the way we do icons on the website, see
  * https://github.com/hypothesis/h/pull/3675
  */
-function SvgIcon({ name }) {
+function SvgIcon({ name, size }) {
   if (!icons[name]) {
     throw new Error(`Unknown icon ${name}`);
   }
   const markup = { __html: icons[name] };
-  return <span dangerouslySetInnerHTML={markup} />;
+
+  const element = useRef();
+  useLayoutEffect(() => {
+    const svg = element.current.querySelector('svg');
+    if (typeof size === 'number') {
+      svg.style.width = `${size}px`;
+      svg.style.height = `${size}px`;
+    }
+  }, [element, size]);
+
+  return <span dangerouslySetInnerHTML={markup} ref={element} />;
 }
 
 SvgIcon.propTypes = {
   /** The name of the icon to load. */
   name: propTypes.string,
+
+  /** The size of the icon in pixels. */
+  size: propTypes.number,
 };
 
 module.exports = SvgIcon;

src/sidebar/components/test/svg-icon-test.js

@@ -21,4 +21,20 @@ describe('SvgIcon', () => {
       render(<SvgIcon name="unknown" />, container);
     });
   });
+
+  it('sets the size of the SVG if provided', () => {
+    const container = document.createElement('div');
+    render(<SvgIcon name="refresh" size={16} />, container);
+    const svg = container.querySelector('svg');
+    assert.equal(svg.style.width, '16px');
+    assert.equal(svg.style.height, '16px');
+  });
+
+  it("uses the icon's default size if no size is provided", () => {
+    const container = document.createElement('div');
+    render(<SvgIcon name="refresh" />, container);
+    const svg = container.querySelector('svg');
+    assert.equal(svg.style.width, '');
+    assert.equal(svg.style.height, '');
+  });
 });