diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx index 12eec32a..87df3c85 100644 --- a/src/components/resolvedicon.jsx +++ b/src/components/resolvedicon.jsx @@ -35,8 +35,7 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log // check mdi- or si- prefixed icons const prefix = icon.split("-")[0]; const suffix = icon.split("-")[icon.split("-").length - 1]; - - // get icon source + if (prefix in iconSetURLs) { // 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)) { @@ -58,27 +57,26 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log /> ); }; + // default to theme setting if no custom icon color code is provided + 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 ( +
+ ); - 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 ( - - ); - } } // fallback to dashboard-icons