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,56 +1,62 @@
-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">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 1024 1024"
-        style={{
-          enableBackground: "new 0 0 1024 1024",
-        }}
-        xmlSpace="preserve"
-        className="w-full h-full"
-      >
-        <style>
-          {
-            ".st0{display:none}.st3{stroke-linecap:square}.st3,.st4{fill:none;stroke:#fff;stroke-miterlimit:10}.st6{display:inline;fill:#333}.st7{fill:#fff}"
-          }
-        </style>
-        <g id="Icon">
-          <path
-            d="M771.9 191c27.7 0 50.1 26.5 50.1 59.3v186.4l-100.2.3V250.3c0-32.8 22.4-59.3 50.1-59.3z"
-            style={{
-              fill: "rgba(var(--color-logo-start))",
-            }}
-          />
-          <linearGradient
-            id="homepage_logo_gradient"
-            gradientUnits="userSpaceOnUse"
-            x1={200.746}
-            y1={225.015}
-            x2={764.986}
-            y2={789.255}
-          >
-            <stop
-              offset={0}
+      {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"
+          style={{
+            enableBackground: "new 0 0 1024 1024",
+          }}
+          xmlSpace="preserve"
+          className="w-full h-full"
+        >
+          <style>
+            {
+              ".st0{display:none}.st3{stroke-linecap:square}.st3,.st4{fill:none;stroke:#fff;stroke-miterlimit:10}.st6{display:inline;fill:#333}.st7{fill:#fff}"
+            }
+          </style>
+          <g id="Icon">
+            <path
+              d="M771.9 191c27.7 0 50.1 26.5 50.1 59.3v186.4l-100.2.3V250.3c0-32.8 22.4-59.3 50.1-59.3z"
               style={{
-                stopColor: "rgba(var(--color-logo-start))",
+                fill: "rgba(var(--color-logo-start))",
               }}
             />
-            <stop
-              offset={1}
+            <linearGradient
+              id="homepage_logo_gradient"
+              gradientUnits="userSpaceOnUse"
+              x1={200.746}
+              y1={225.015}
+              x2={764.986}
+              y2={789.255}
+            >
+              <stop
+                offset={0}
+                style={{
+                  stopColor: "rgba(var(--color-logo-start))",
+                }}
+              />
+              <stop
+                offset={1}
+                style={{
+                  stopColor: "rgba(var(--color-logo-stop))",
+                }}
+              />
+            </linearGradient>
+            <path
+              d="M721.8 250.3c0-32.7 22.4-59.3 50.1-59.3H253.1c-27.7 0-50.1 26.5-50.1 59.3v582.2l90.2-75.7-.1-130.3H375v61.8l88-73.8 258.8 217.9V250.6"
               style={{
-                stopColor: "rgba(var(--color-logo-stop))",
+                fill: "url(#homepage_logo_gradient)",
               }}
             />
-          </linearGradient>
-          <path
-            d="M721.8 250.3c0-32.7 22.4-59.3 50.1-59.3H253.1c-27.7 0-50.1 26.5-50.1 59.3v582.2l90.2-75.7-.1-130.3H375v61.8l88-73.8 258.8 217.9V250.6"
-            style={{
-              fill: "url(#homepage_logo_gradient)",
-            }}
-          />
-        </g>
-      </svg>
+          </g>
+        </svg>
+      }
     </div>
-  );
+  )
 }