Inline SVGs.

react-scripts uses an old version of @svgr/webpack that is throwing the "digital envelope routines::unsupported" error.

src/components/ChevronImg.tsx

@@ -1,6 +1,4 @@
 import { CSSProperties } from 'react'
-import ArrowDownBlack from '../images/iconfinder_ic_keyboard_arrow_down_black_352466.svg'
-import ArrowDownWhite from '../images/keyboard_arrow_down_352466.svg'
 import fastClick from '../util/fastClick'
 
 interface ChevronImgProps {
@@ -10,19 +8,19 @@ interface ChevronImgProps {
   additonalStyle?: CSSProperties
 }
 
-/**
- * Loading component.
- */
+/** A downward facing chevron. */
 const ChevronImg = ({ dark, onClickHandle, className, additonalStyle }: ChevronImgProps) => (
-  <img
-    src={dark ? ArrowDownWhite : ArrowDownBlack}
-    alt='Arrow'
+  <svg
+    viewBox='0 0 48 48'
     height='22px'
     width='22px'
     style={{ ...additonalStyle, cursor: 'pointer' }}
     {...fastClick(onClickHandle)}
     className={className || ''}
-  />
+  >
+    <path d='M14.83 16.42l9.17 9.17 9.17-9.17 2.83 2.83-12 12-12-12z' fill={dark ? '#fff' : '#000'} />
+    <path d='M0-.75h48v48h-48z' fill='none' />
+  </svg>
 )
 
 export default ChevronImg

src/components/DropDownMenu.tsx

@@ -1,8 +1,6 @@
 import React, { CSSProperties } from 'react'
 import { useSelector } from 'react-redux'
 import ExportOption from '../@types/ExportOption'
-import Checked from '../images/iconfinder_done-01_186405.svg'
-import CheckedBlack from '../images/iconfinder_icon-checkmark_black.svg'
 import themeColors from '../selectors/themeColors'
 import fastClick from '../util/fastClick'
 
@@ -42,7 +40,18 @@ const DropDownMenu = React.forwardRef<HTMLDivElement, DropDownMenuProps>(
           >
             <div className='drop-down-option'>
               {option.label === (selected || options[0]).label ? (
-                <img src={dark ? Checked : CheckedBlack} alt='Checked' width='16px' height='16px' />
+                dark ? (
+                  <svg width='16px' height='16px' viewBox='0 0 32 32'>
+                    <path
+                      d='M30.171,6.131l-0.858-0.858c-0.944-0.945-2.489-0.945-3.433,0L11.294,19.859l-5.175-5.174  c-0.943-0.944-2.489-0.944-3.432,0.001l-0.858,0.857c-0.943,0.944-0.943,2.489,0,3.433l7.744,7.75c0.944,0.945,2.489,0.945,3.433,0  L30.171,9.564C31.112,8.62,31.112,7.075,30.171,6.131z'
+                      fill='#fff'
+                    />
+                  </svg>
+                ) : (
+                  <svg height='16px' width='16px' viewBox='0 0 512 512'>
+                    <path d='M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7  c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7  c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8  c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z' />
+                  </svg>
+                )
               ) : (
                 <div style={{ width: '16px', height: '16px' }}></div>
               )}