Support custom colors for icons (#1724)

* 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.

* Streamline code for custom icon colors in resolvedicon.jsx 

Removed redundant if statement when defaulting to theme colors if no custom icon color code is provided

* Update resolvedicon.jsx

Remove unnecessary variable, restoring the fallback code in case no custom icon color is provided.

* Update resolvedicon.jsx - test for custom color suffix

Changed if condition from string.match to string.test and expanded regex to also include upper case letters.

* Update resolvedicon.jsx - DRY

Removed repetition, slimmed down if statement.

Also reverse previous commit as it did not work as intended.

* Update resolvedicon.jsx - upper case color hex codes

Update regular expression to also allow for upper case letters as part of the hex color code, as either are valid when describing an objects color.

* Refactor custom color code

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/components/resolvedicon.jsx

@@ -33,11 +33,22 @@ 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];
 
   if (prefix in iconSetURLs) {
-    // get icon source
-    const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
+    // default to theme setting
+    let iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
+    let 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)))";
+
+    // use custom hex color if provided
+    const colorMatches = icon.match(/[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]$/i)
+    if (colorMatches?.length) {
+      iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${colorMatches[0]}`, "");
+      iconColor = `${colorMatches[0]}`;
+    }
+
     const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
 
     return (
@@ -47,16 +58,13 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
           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)))",
+          background: `${iconColor}`,
           mask: `url(${iconSource}) no-repeat center / contain`,
           WebkitMask: `url(${iconSource}) no-repeat center / contain`,
         }}
       />
     );
   }
-
  
   // fallback to dashboard-icons
   if (icon.endsWith(".svg")) {