From 50146dc08e0c82ca672790da921845ed69df3230 Mon Sep 17 00:00:00 2001
From: Mega-Volti <119437326+Mega-Volti@users.noreply.github.com>
Date: Tue, 25 Jul 2023 04:02:32 +0200
Subject: [PATCH] Add custom colors to resolvedicon.jsx

Enables appending a color code (e.g. "#123456") to all mdi and si icons, in order to change their color to a per-icon custom one.
---
 src/components/resolvedicon.jsx | 63 ++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx
index fa9fa68d..12eec32a 100644
--- a/src/components/resolvedicon.jsx
+++ b/src/components/resolvedicon.jsx
@@ -33,30 +33,53 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
   }
 
   // check mdi- or si- prefixed icons
-  const prefix = icon.split("-")[0]
+  const prefix = icon.split("-")[0];
+  const suffix = icon.split("-")[icon.split("-").length - 1];
 
+  // get icon source
   if (prefix in iconSetURLs) {
-    // get icon source
-    const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
-    const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
+    // check whether icon ends with color code
+    if (!(suffix.match(`[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]`) == null)) {
 
-    return (
-      <div
-        style={{
-          width,
-          height,
-          maxWidth: '100%',
-          maxHeight: '100%',
-          background: settings.iconStyle === "theme" ?
-            `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
-            "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
-          mask: `url(${iconSource}) no-repeat center / contain`,
-          WebkitMask: `url(${iconSource}) no-repeat center / contain`,
-        }}
-      />
-    );
+      const iconColor = `${suffix}`;
+      const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${suffix}`, "");
+      const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
+      return (
+        <div
+          style={{
+            width,
+            height,
+            maxWidth: '100%',
+            maxHeight: '100%',
+            background: `${iconColor}`,
+            mask: `url(${iconSource}) no-repeat center / contain`,
+            WebkitMask: `url(${iconSource}) no-repeat center / contain`,
+          }}
+        />
+      );
+    };
+
+    if (suffix.match(`[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]`) == null) {
+      const iconColor = settings.iconStyle === "theme" ?
+              `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
+              "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
+      const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
+      const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
+      return (
+        <div
+          style={{
+            width,
+            height,
+            maxWidth: '100%',
+            maxHeight: '100%',
+            background: `${iconColor}`,
+            mask: `url(${iconSource}) no-repeat center / contain`,
+            WebkitMask: `url(${iconSource}) no-repeat center / contain`,
+          }}
+        />
+      );
+    }
   }
-
  
   // fallback to dashboard-icons
   if (icon.endsWith(".svg")) {