From 79cf0bbd2dd0ef6d1d30b4c752b7108cd3219851 Mon Sep 17 00:00:00 2001
From: Benjamin Akar <benjaminakar2001@gmail.com>
Date: Thu, 2 Jun 2022 18:45:00 +0200
Subject: [PATCH] fix: disappearing icons

---
 apps/desktop/vite.config.ts                       |  8 ++++++--
 .../interface/src/components/file/FileThumb.tsx   |  4 ++--
 .../interface/src/components/file/Sidebar.tsx     | 15 ++++++++++++---
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
index 7c6347331..d30823c5a 100644
--- a/apps/desktop/vite.config.ts
+++ b/apps/desktop/vite.config.ts
@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
-import svg from 'vite-plugin-svgr';
+import svgr from 'vite-plugin-svgr';
 
 import { name, version } from './package.json';
 
@@ -14,7 +14,11 @@ export default defineConfig({
 		react({
 			jsxRuntime: 'classic'
 		}),
-		svg({ svgrOptions: { icon: true } })
+		svgr({
+			svgrOptions: {
+				icon: true
+			}
+		})
 	],
 	root: 'src',
 	publicDir: '../../packages/interface/src/assets',
diff --git a/packages/interface/src/components/file/FileThumb.tsx b/packages/interface/src/components/file/FileThumb.tsx
index 347ad86a3..e50bc1378 100644
--- a/packages/interface/src/components/file/FileThumb.tsx
+++ b/packages/interface/src/components/file/FileThumb.tsx
@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 
 import { AppPropsContext } from '../../App';
 import icons from '../../assets/icons';
-import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
+import folderSvg from '../../assets/svg/folder.svg';
 
 export default function FileThumb(props: {
 	file: FilePath;
@@ -17,7 +17,7 @@ export default function FileThumb(props: {
 	const { data: client } = useBridgeQuery('NodeGetState');
 
 	if (props.file.is_dir) {
-		return <Folder className="max-w-[170px]" />;
+		return <img src={folderSvg} className="max-w-[20px]" alt="Folder icon" />;
 	}
 
 	if (client?.data_path && (props.file.file?.has_thumbnail || props.hasThumbnailOverride)) {
diff --git a/packages/interface/src/components/file/Sidebar.tsx b/packages/interface/src/components/file/Sidebar.tsx
index 231b45b27..598b4fa79 100644
--- a/packages/interface/src/components/file/Sidebar.tsx
+++ b/packages/interface/src/components/file/Sidebar.tsx
@@ -9,7 +9,8 @@ import { NavLink, NavLinkProps } from 'react-router-dom';
 
 import { AppPropsContext } from '../../App';
 import { ReactComponent as FolderWhite } from '../../assets/svg/folder-white.svg';
-import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
+import folderWhiteSvg from '../../assets/svg/folder-white.svg';
+import folderSvg from '../../assets/svg/folder.svg';
 import { useNodeStore } from '../device/Stores';
 import RunningJobsWidget from '../jobs/RunningJobsWidget';
 import { MacTrafficLights } from '../os/TrafficLights';
@@ -172,8 +173,16 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
 										)}
 									>
 										<div className="w-[18px] mr-2 -mt-0.5">
-											<FolderWhite className={clsx(!isActive && 'hidden')} />
-											<Folder className={clsx(isActive && 'hidden')} />
+											<img
+												src={folderWhiteSvg}
+												className={clsx(!isActive && 'hidden')}
+												alt="Folder icon"
+											/>
+											<img
+												src={folderSvg}
+												className={clsx(isActive && 'hidden')}
+												alt="Folder icon"
+											/>
 										</div>
 										{location.name}
 										<div className="flex-grow" />