Fix missing dark/light and download icons by using proper vite import…

…s. (#27) Co-authored-by: Benjamin Clark <clarkben@meta.com>
OvertureMaps · May 17, 2024 · 19869ad · 19869ad
1 parent f5db222
commit 19869ad
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/site/src/DarkModeToggle.jsx b/site/src/DarkModeToggle.jsx
@@ -1,5 +1,7 @@
 import { setTheme } from './themeUtils';
 import PropTypes from 'prop-types';
+import darkModeIcon from '/darkmode.svg';
+import lightModeIcon from '/lightmode.svg';
 
 export default function DarkModeToggle({ mode, setMode }) {
 
@@ -15,7 +17,7 @@ export default function DarkModeToggle({ mode, setMode }) {
     return (
         <div>
             <button id="toggle" className="toggle--checkbox" onClick={toggleDarkMode} readOnly>
-                <img src={mode === 'theme-light' ? '/lightmode.svg' : '/darkmode.svg'} />
+                <img src={mode === 'theme-light' ? lightModeIcon : darkModeIcon} />
             </button>
         </div>
     );

diff --git a/site/src/DownloadButton.jsx b/site/src/DownloadButton.jsx
@@ -2,6 +2,7 @@ import { useMap } from "react-map-gl/maplibre";
 import { useEffect, useState } from "react";
 import { DownloadCatalog } from "./DownloadCatalog.js"
 import { ParquetDataset, set_panic_hook, writeGeoJSON } from "@geoarrow/geoarrow-wasm/esm/index.js"
+import downloadIcon from "/download.svg"
 
 function DownloadButton() {
   const { myMap } = useMap();
@@ -79,7 +80,7 @@ function DownloadButton() {
     <>
       <button id="download" disabled={loading} className={loading ? "disabled" : ''} onClick={handleDownloadClick}>
 
-      <img className={'dl-img'} src="/download.svg"/>
+      <img className={'dl-img'} src={downloadIcon}/>
         {loading ? 'Downloading...' : 'Download Visible'}
       </button>
     </>