Use Icon component in place of icons.svg

src/components/Labelling/LabellingFlow.js

@@ -5,7 +5,7 @@ import cloneDeep from 'lodash.clonedeep'
 import bounding from '../../lib/utils/bounding.js'
 
 import LabellingTransition from './LabellingTransition.js'
-import { SelectTree } from 'react-viewerbase'
+import { SelectTree, Icon } from 'react-viewerbase'
 import { getAddLabelButtonStyle } from './labellingPositionUtils.js'
 
 import OHIFLabellingData from './OHIFLabellingData.js'
@@ -93,8 +93,6 @@ export default class LabellingFlow extends Component {
       locationLabel,
     } = this.state
 
-    const Icons = `${window.config.routerBasename}/icons.svg`.replace('//', '/')
-
     if (!skipAddLabelButton) {
       return (
         <>
@@ -125,9 +123,7 @@ export default class LabellingFlow extends Component {
               className="checkIconWrapper"
               onClick={this.fadeOutAndLeaveFast}
             >
-              <svg className="checkIcon">
-                <use xlinkHref={`${Icons}#check-solid`} />
-              </svg>
+              <Icon name="check-solid" className="checkIcon" />
             </div>
             <div className="locationDescriptionWrapper">
               <div className="location">{locationLabel}</div>

src/components/OHIFLogo/OHIFLogo.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import './OHIFLogo.css'
 
-const Icons = `${window.config.routerBasename}/icons.svg`.replace('//', '/')
+import { Icon } from 'react-viewerbase'
 
 function OHIFLogo() {
   return (
@@ -11,9 +11,7 @@ function OHIFLogo() {
       className="header-brand"
       href="http://ohif.org"
     >
-      <svg className="header-logo-image">
-        <use xlinkHref={`${Icons}#icon-ohif-logo`} />
-      </svg>
+      <Icon name="ohif-log" className="header-logo-image" />
       <div className="header-logo-text">Open Health Imaging Foundation</div>
     </a>
   )