Merge pull request #664 from Snekussaurier/feature-565

Add ability to use custom logo

src/components/resolvedicon.jsx

@@ -1,9 +1,9 @@
 import Image from "next/future/image";
 
-export default function ResolvedIcon({ icon }) {
+export default function ResolvedIcon({ icon, width = 32, height = 32 }) {
   // direct or relative URLs
   if (icon.startsWith("http") || icon.startsWith("/")) {
-    return <Image src={`${icon}`} width={32} height={32} alt="logo" />;
+    return <Image src={`${icon}`} width={width} height={height} alt="logo" />;
   }
 
   // mdi- prefixed, material design icons
@@ -12,8 +12,8 @@ export default function ResolvedIcon({ icon }) {
     return (
       <div
         style={{
-          width: 32,
-          height: 32,
+          width,
+          height,
           maxWidth: '100%',
           maxHeight: '100%',
           background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
@@ -29,8 +29,8 @@ export default function ResolvedIcon({ icon }) {
   return (
     <Image
       src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
-      width={32}
-      height={32}
+      width={width}
+      height={height}
       alt="logo"
     />
   );

src/components/widgets/logo/logo.jsx

@@ -1,6 +1,11 @@
-export default function Logo() {
+import ResolvedIcon from "components/resolvedicon"
+
+export default function Logo({ options }) {
   return (
     <div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center">
+      {options.icon ?
+        <ResolvedIcon icon={options.icon} width={48} height={48} /> :
+        // fallback to homepage logo
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1024 1024"
@@ -51,6 +56,7 @@ export default function Logo() {
             />
           </g>
         </svg>
+      }
     </div>
-  );
+  )
 }