From beabb5b2915b1a1bef1e303b89442cc21cce95cd Mon Sep 17 00:00:00 2001 From: davidsmejia Date: Sun, 30 Apr 2023 20:31:14 -0400 Subject: [PATCH] add iconStyle setting --- src/components/resolvedicon.jsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx index 5373474a..1df5ac62 100644 --- a/src/components/resolvedicon.jsx +++ b/src/components/resolvedicon.jsx @@ -1,6 +1,14 @@ +import { useContext } from "react"; import Image from "next/future/image"; +import { SettingsContext } from "utils/contexts/settings"; +import { ThemeContext } from "utils/contexts/theme"; + + export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "logo" }) { + const { settings } = useContext(SettingsContext); + const { theme } = useContext(ThemeContext); + // direct or relative URLs if (icon.startsWith("http") || icon.startsWith("/")) { return ( @@ -25,9 +33,16 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log }; if (prefix in prefixPaths) { + // get icon Source const iconName = icon.replace(`${prefix}-`, "").replace(".svg", ""); const iconSource = `${prefixPaths[prefix]}${iconName}.svg`; + const gradientStyle = "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))"; + const themeStyle = `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity))`; + + const setting = settings.iconStyle || "gradient"; + const background = setting === "gradient" ? gradientStyle : themeStyle; + return (