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">
+              <Icon name="check-solid" className="checkIcon" />
-                <use xlinkHref={`${Icons}#check-solid`} />
-              </svg>
             </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">
+      <Icon name="ohif-log" className="header-logo-image" />
-        <use xlinkHref={`${Icons}#icon-ohif-logo`} />
-      </svg>
       <div className="header-logo-text">Open Health Imaging Foundation</div>
     </a>
   )

src/connectedComponents/ConnectedPluginSwitch.js

@@ -125,7 +125,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
     },
     /*{
       text: '3D',
-      icon: `${Icons}#cube`,
+      icon: `#cube`,
       onClick: (click) => {
         console.warn('3D Perspective');
         const data = {

src/connectedComponents/ToolbarRow.js

@@ -1,13 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import OHIF from 'ohif-core'
-import { RoundedButtonGroup } from 'react-viewerbase'
+import { RoundedButtonGroup, Icon } from 'react-viewerbase'
 import ConnectedLayoutButton from './ConnectedLayoutButton'
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js'
 import './ToolbarRow.css'
 
-const Icons = `${window.config.routerBasename}/icons.svg`.replace('//', '/')
-
 class ToolbarRow extends Component {
   static propTypes = {
     leftSidebarOpen: PropTypes.bool.isRequired,
@@ -34,9 +32,11 @@ class ToolbarRow extends Component {
     const leftSidebarToggle = [
       {
         value: 'studies',
-        svgLink: `${Icons}#icon-studies`,
+        icon: {
-        svgWidth: 15,
+          name: 'studies',
-        svgHeight: 13,
+          width: 15,
+          height: 13,
+        },
         bottomLabel: 'Series',
       },
     ]
@@ -44,9 +44,11 @@ class ToolbarRow extends Component {
     const rightSidebarToggle = [
       {
         value: 'measurements',
-        svgLink: `${Icons}#icon-measurements-lesions`,
+        icon: {
-        svgWidth: 15,
+          name: 'measurement-lesions',
-        svgHeight: 13,
+          width: 15,
+          height: 13,
+        },
         bottomLabel: 'Measurements',
       },
     ]

src/utils/getDefaultToolbarButtons.js

@@ -39,7 +39,7 @@ export default function() {
         command: 'Annotate',
         type: 'tool',
         text: 'Annotate',
-        icon: `${Icons}#icon-tools-measure-non-target`,
+        icon: `icon-tools-measure-non-target`,
         active: false
     },*/
     {