Merge pull request #220 from spacedriveapp/eng-83-disappearing-folder-icons

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

apps/landing/src/pages/roadmap.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { ReactComponent as Content } from '~/docs/product/roadmap.md';
 
-import { ReactComponent as Folder } from '../../../../packages/interface/src/assets/svg/folder.svg';
+import { Folder } from '../../../../packages/interface/src/components/icons/Folder';
 import Markdown from '../components/Markdown';
 
 function Page() {
@@ -13,7 +13,7 @@ function Page() {
 				<meta name="description" content="What can Spacedrive do?" />
 			</Helmet>
 			<div className="w-24 mb-10">
-				<Folder className="" />
+				<Folder />
 			</div>
 			<Content />
 		</Markdown>

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 { Folder } from '../icons/Folder';
 
 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 <Folder className="max-w-[20px]" />;
 	}
 
 	if (client?.data_path && (props.file.file?.has_thumbnail || props.hasThumbnailOverride)) {

packages/interface/src/components/file/Sidebar.tsx

@@ -8,9 +8,8 @@ import React, { useContext } from 'react';
 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 { useNodeStore } from '../device/Stores';
+import { Folder } from '../icons/Folder';
 import RunningJobsWidget from '../jobs/RunningJobsWidget';
 import { MacTrafficLights } from '../os/TrafficLights';
 import { DefaultProps } from '../primitive/types';
@@ -172,7 +171,7 @@ 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')} white />
 											<Folder className={clsx(isActive && 'hidden')} />
 										</div>
 										{location.name}

packages/interface/src/components/icons/Folder.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import folderWhiteSvg from '../../assets/svg/folder-white.svg';
+import folderSvg from '../../assets/svg/folder.svg';
+
+interface FolderProps {
+	/**
+	 * Append additional classes to the underlying SVG
+	 */
+	className?: string;
+
+	/**
+	 * Render a white folder icon
+	 */
+	white?: boolean;
+}
+
+export function Folder(props: FolderProps) {
+	return (
+		<img
+			className={props.className}
+			src={props.white ? folderWhiteSvg : folderSvg}
+			alt="Folder icon"
+		/>
+	);
+}