Feature: add category icons (#301)

* Update setting.yaml mapping

* Implement adding icon to categoryTitle

* Move resolveIcon func to utils for reusability

* Turn off default export eslint rule

* Fix util typo

* Revert "Turn off default export eslint rule"

This reverts commit e8dd853ba6fac1d33253667ffe9e02010a8dcfd6.

* fix resolveIcon export

* Revert "Update setting.yaml mapping"

This reverts commit 78c947766951e14d1f6db290c0ab03ccc8f1ebc3.

* Revert "Implement adding icon to categoryTitle"

* Use settings layout for group icon

* Revert "Fix util typo"

This reverts commit ab49b426ec6d925d7938c3ddec753a0e7c8759af.

* ResolvedIcon component

Co-authored-by: Mindfreak9100 <dhoom_rik@yahoo.com>
Co-authored-by: Michael Shamoon <4887959+shamoon@users.noreply.github.com>

src/components/resolvedicon.jsx

@@ -0,0 +1,35 @@
+import Image from "next/future/image";
+
+export default function ResolvedIcon({ icon }) {
+  // direct or relative URLs
+  if (icon.startsWith("http") || icon.startsWith("/")) {
+    return <Image src={`${icon}`} width={32} height={32} alt="logo" />;
+  }
+
+  // mdi- prefixed, material design icons
+  if (icon.startsWith("mdi-")) {
+    const iconName = icon.replace("mdi-", "").replace(".svg", "");
+    return (
+      <div
+        style={{
+          width: 32,
+          height: 32,
+          background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
+          mask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${iconName}.svg) no-repeat center / contain`,
+          WebkitMask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${iconName}.svg) no-repeat center / contain`,
+        }}
+      />
+    );
+  }
+
+  // fallback to dashboard-icons
+  const iconName = icon.replace(".png", "");
+  return (
+    <Image
+      src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
+      width={32}
+      height={32}
+      alt="logo"
+    />
+  );
+}