OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add iconStyle setting

Browse Source
This commit is contained in:
davidsmejia 2023-04-30 20:31:14 -04:00
parent d095923f04
commit beabb5b291
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/resolvedicon.jsx
View File

@ -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 (
<div
style={{
@ -35,7 +50,7 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
height,
maxWidth: '100%',
maxHeight: '100%',
background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
background,
mask: `url(${iconSource}) no-repeat center / contain`,
WebkitMask: `url(${iconSource}) no-repeat center / contain`,
}}