Update annotator toolbar to use SVG icons

src/annotator/components/toolbar.js

@@ -2,6 +2,8 @@ import classnames from 'classnames';
 import propTypes from 'prop-types';
 import { createElement } from 'preact';
 
+import SvgIcon from '../../shared/components/svg-icon';
+
 function ToolbarButton({
   buttonRef,
   extraClasses,
@@ -19,15 +21,15 @@ function ToolbarButton({
 
   return (
     <button
-      // This currently uses the icon font. This needs to be converted to
-      // `SvgIcon`.
-      className={classnames('annotator-frame-button', extraClasses, icon)}
+      className={classnames('annotator-frame-button', extraClasses)}
       aria-label={label}
       aria-pressed={selected}
       onClick={handleClick}
       ref={buttonRef}
       title={label}
-    />
+    >
+      <SvgIcon name={icon} />
+    </button>
   );
 }
 
@@ -61,7 +63,7 @@ export default function Toolbar({
         <ToolbarButton
           extraClasses="annotator-frame-button--sidebar_close"
           label="Close annotation sidebar"
-          icon="h-icon-close"
+          icon="cancel"
           onClick={closeSidebar}
         />
       )}
@@ -74,14 +76,14 @@ export default function Toolbar({
               ? 'Hide annotation sidebar'
               : 'Show annotation sidebar'
           }
-          icon={isSidebarOpen ? 'h-icon-chevron-right' : 'h-icon-chevron-left'}
+          icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
           onClick={toggleSidebar}
         />
       )}
       {!useMinimalControls && (
         <ToolbarButton
           label="Show highlights"
-          icon={showHighlights ? 'h-icon-visibility' : 'h-icon-visibility-off'}
+          icon={showHighlights ? 'show' : 'hide'}
           selected={showHighlights}
           onClick={toggleHighlights}
         />
@@ -91,9 +93,7 @@ export default function Toolbar({
           label={
             newAnnotationType === 'note' ? 'New page note' : 'New annotation'
           }
-          icon={
-            newAnnotationType === 'note' ? 'h-icon-note' : 'h-icon-annotate'
-          }
+          icon={newAnnotationType === 'note' ? 'note' : 'annotate'}
           onClick={createAnnotation}
         />
       )}

src/styles/annotator/annotator.scss

@@ -103,12 +103,11 @@ $sidebar-collapse-transition-time: 150ms;
     background: var.$white;
     border: solid 1px var.$grey-3;
     border-radius: 4px;
-    color: var.$grey-semi;
+    color: var.$grey-5;
     text-decoration: none;
     height: 30px;
     width: 30px;
     padding: 0;
-    font-size: 16px;
     margin-bottom: 5px;
 
     &:active {
@@ -117,7 +116,7 @@ $sidebar-collapse-transition-time: 150ms;
 
     &:focus,
     &:hover {
-      color: var.$text-color;
+      color: var.$grey-7;
     }
   }
 
@@ -129,6 +128,7 @@ $sidebar-collapse-transition-time: 150ms;
     width: 36px;
     margin-bottom: 10px;
     height: var.$top-bar-height;
+    color: var.$grey-semi;
   }
 
   .annotator-frame-button--sidebar_close {