CORE: temp header icons

reader/components/downloader/index.jsx

@@ -3,6 +3,7 @@ import { Button, Icon } from '@oacore/design'
 import React from 'react'
 
 import { logEvent } from '../../../utils/analytics'
+import { getIconPath } from '../../utils/helpers'
 
 const downloadPdf = async (document, pdfUrl) => {
   const pdfName = pdfUrl.substring(pdfUrl.lastIndexOf('/') + 1)
@@ -45,7 +46,7 @@ export const DownloadFile = ({ document, url, className }) => (
     }}
     className={className}
   >
-    <Icon src="#file-download" alt="Download document" />
+    <Icon src={getIconPath('file-download')} alt="Download document" />
   </Button>
 )
 

reader/components/header/index.jsx

@@ -12,6 +12,7 @@ import {
 } from '../../store/ui/actions'
 import Print from '../print'
 import { logEvent } from '../../../utils/analytics'
+import { getIconPath } from '../../utils/helpers'
 
 const Header = () => {
   const [{ metadata, ui, document }, dispatch] = useGlobalStore()
@@ -41,7 +42,7 @@ const Header = () => {
             ui.isOutlineSidebarVisible && styles.buttonActive
           )}
         >
-          <Icon src="#file-document" alt="Show outline" />
+          <Icon src={getIconPath('file-document')} alt="Show outline" />
         </Button>
         <Button
           title="Show thumbnails"
@@ -57,7 +58,7 @@ const Header = () => {
             ui.isThumbnailSidebarVisible && styles.buttonActive
           )}
         >
-          <Icon src="#view-grid" alt="Show thumbnails" />
+          <Icon src={getIconPath('view-grid')} alt="Show thumbnails" />
         </Button>
       </AppBar.Item>
       <AppBar.Item className={styles.itemCenter}>
@@ -67,7 +68,7 @@ const Header = () => {
           onClick={handleRedirection}
           className={styles.buttonMenu}
         >
-          <Icon src="#core-symbol" alt="CORE" />
+          <Icon src={getIconPath('core-symbol')} alt="CORE" />
         </Button>
       </AppBar.Item>
       <AppBar.Item className={styles.itemRight}>

reader/components/print/index.jsx

@@ -7,6 +7,7 @@ import ReactToPrint, { PrintContextConsumer } from 'react-to-print'
 import { withGlobalStore } from '../../store'
 import styles from './styles.module.css'
 import { logEvent } from '../../../utils/analytics'
+import { getIconPath } from '../../utils/helpers'
 
 // The size of the canvas in pixels for printing.
 const PRINT_RESOLUTION = 150
@@ -275,9 +276,9 @@ class Print extends React.Component {
                 }}
               >
                 {isPrinting ? (
-                  <Icon src="#printer-off" alt="Cancel print" />
+                  <Icon src={getIconPath('printer-off')} alt="Cancel print" />
                 ) : (
-                  <Icon src="#printer" alt="Print document" />
+                  <Icon src={getIconPath('printer')} alt="Print document" />
                 )}
               </Button>
             )}

reader/components/toolbar/index.jsx

@@ -10,6 +10,7 @@ import {
   scrollToRelatedPapers,
   unsetRelatedPapers,
 } from '../../store/ui/actions'
+import { getIconPath } from '../../utils/helpers'
 
 const MIN_SCALE = 0.1
 const MAX_SCALE = 10.0
@@ -182,7 +183,7 @@ const Toolbar = ({ viewer, eventBus }) => {
             })
           }}
         >
-          <Icon src="#format-rotate-90" alt="Rotate" />
+          <Icon src={getIconPath('format-rotate-90')} alt="Rotate" />
         </Button>
         <Button
           title="Zoom in"
@@ -198,7 +199,7 @@ const Toolbar = ({ viewer, eventBus }) => {
             })
           }}
         >
-          <Icon src="#magnify-plus-outline" alt="Zoom in" />
+          <Icon src={getIconPath('magnify-plus-outline')} alt="Zoom in" />
         </Button>
         <Button
           title="Zoom out"
@@ -214,7 +215,7 @@ const Toolbar = ({ viewer, eventBus }) => {
             })
           }}
         >
-          <Icon src="#magnify-minus-outline" alt="Zoom out" />
+          <Icon src={getIconPath('magnify-minus-outline')} alt="Zoom out" />
         </Button>
       </div>
       <div className={styles.pdfPagination}>
@@ -231,7 +232,7 @@ const Toolbar = ({ viewer, eventBus }) => {
             globalDispatch(changeCurrentPageNumber(viewer.currentPageNumber))
           }}
         >
-          <Icon src="#chevron-left" alt="Previous page" />
+          <Icon src={getIconPath('chevron-left')} alt="Previous page" />
         </Button>
         <div className={styles.pagination}>
           <TextField
@@ -273,7 +274,7 @@ const Toolbar = ({ viewer, eventBus }) => {
             globalDispatch(changeCurrentPageNumber(viewer.currentPageNumber))
           }}
         >
-          <Icon src="#chevron-right" alt="Next page" />
+          <Icon src={getIconPath('chevron-right')} alt="Next page" />
         </Button>
       </div>
     </div>

reader/utils/helpers.js

@@ -17,4 +17,13 @@ export function checkType(dataProviderId, members) {
   })
 }
 
+export const getIconPath = (iconName) => {
+  const isProduction =
+    process.env.NODE_ENV === 'production' || process.env.BUILD_TARGET === 'aws'
+  const basePath = isProduction
+    ? '/reader/static/design/icons.svg'
+    : '/static/design/icons.svg'
+  return `${basePath}#${iconName}`
+}
+
 export default { debounce, checkType }