fix: disappearing icons

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',

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)) {

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" />