Change all logos to SVG

renderer/components/Header.tsx

@@ -1,5 +1,6 @@
 import { featureFlags } from "@common/feature-flags";
 import React from "react";
+import Logo from "./icons/Logo";
 
 export default function Header({ version }: { version: string }) {
   return (
@@ -8,9 +9,10 @@ export default function Header({ version }: { version: string }) {
       target="_blank"
       className={`outline-none focus-visible:ring-2`}
       data-tooltip-id="tooltip"
-      data-tooltip-content="Star us on GitHub 😁">
+      data-tooltip-content="Star us on GitHub 😁"
+    >
       <div className="flex items-center gap-3 px-5 py-5">
-        <img src="icon.png" className="inline-block w-14" alt="Upscayl Logo" />
+        <Logo className="inline-block h-14 w-14" />
         <div className="flex flex-col justify-center">
           <h1 className="text-3xl font-bold">
             Upscayl{" "}

renderer/components/icons/Logo.tsx

@@ -3,8 +3,6 @@ import React from "react";
 const Logo = ({ ...rest }) => {
   return (
     <svg
-      width="256"
-      height="256"
       viewBox="0 0 256 256"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

renderer/components/upscayl-tab/view/ProgressBar.tsx

@@ -26,11 +26,6 @@ function ProgressBar({
   return (
     <div className="absolute z-50 flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
       <div className="flex flex-col items-center rounded-btn bg-base-100/50 p-4 backdrop-blur-lg">
-        {/* <img
-          src="icon.png"
-          alt="Upscayl Icon"
-          className="spinner mb-4 h-12 w-12"
-        /> */}
         <Logo className="spinner mb-4 h-12 w-12" />
         <p className="rounded-full px-2 pb-2 font-bold">
           {batchMode && "Batch Upscale In Progress: " + batchProgress}

renderer/pages/index.tsx

@@ -49,6 +49,7 @@ import {
 import { cn } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
 import { ToastAction } from "@/components/ui/toast";
+import Logo from "@/components/icons/Logo";
 
 const Home = () => {
   const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
@@ -584,11 +585,7 @@ const Home = () => {
 
   if (isLoading) {
     return (
-      <img
+      <Logo className="absolute left-1/2 top-1/2 w-36 -translate-x-1/2 -translate-y-1/2 animate-pulse" />
-        src="icon.png"
-        alt="Upscayl icon"
-        className="absolute left-1/2 top-1/2 w-36 -translate-x-1/2 -translate-y-1/2 animate-pulse"
-      />
     );
   }
 
@@ -597,7 +594,7 @@ const Home = () => {
       {/* TOP LOGO WHEN SIDEBAR IS HIDDEN */}
       {!showSidebar && (
         <div className="fixed right-2 top-2 z-50 flex items-center justify-center gap-2 rounded-[7px] bg-base-300 px-2 py-1 font-medium text-base-content ">
-          <img src="/icon.png" alt="Logo" className="w-5" />
+          <Logo className="w-5" />
           Upscayl
         </div>
       )}