logo theme

frontend/src/ui/icons.tsx

@@ -54,6 +54,7 @@ import {
 } from '@tabler/icons-react';
 import FolderSvg from '../assets/folder.svg';
 const logoWebp = new URL('../assets/logo.webp', import.meta.url).toString();
+const logoSmallWebp = new URL('../assets/logo_small.webp', import.meta.url).toString();
 import composeClassName from './classNames';
 
 type TablerIconComponent = (props: TablerIconProps) => JSX.Element;
@@ -101,17 +102,27 @@ export const FolderIcon: TablerIconComponent = ({ className, size = 16, title, .
   );
 };
 
-export const LogoIcon: React.FC<{ className?: string; width?: number; height?: number }> = ({ className, width = 24, height = 24 }) => (
-  <img
-    src={logoWebp}
-    className={composeClassName('logo-icon', className)}
-    width={width}
-    height={height}
-    alt="Papercrate logo"
-    loading="lazy"
-    decoding="async"
-  />
-);
+interface LogoIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+  variant?: 'default' | 'small';
+}
+
+export const LogoIcon: React.FC<LogoIconProps> = ({ className, width = 24, height = 24, variant = 'default' }) => {
+  const src = variant === 'small' ? logoSmallWebp : logoWebp;
+  return (
+    <img
+      src={src}
+      className={composeClassName('logo-icon', className)}
+      width={width}
+      height={height}
+      alt="Papercrate logo"
+      loading="lazy"
+      decoding="async"
+    />
+  );
+};
 
 export const TagIcon: TablerIconComponent = ({ className, size = '1em', stroke = 0, ...rest }) => (
   <IconTagFilled