mirror of
https://github.com/karl0ss/homepage.git
synced 2025-05-25 07:05:18 +01:00
1560bb7762
* 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>
106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import { useContext } from "react";
|
|
import Image from "next/future/image";
|
|
|
|
import { SettingsContext } from "utils/contexts/settings";
|
|
import { ThemeContext } from "utils/contexts/theme";
|
|
|
|
const iconSetURLs = {
|
|
'mdi': "https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/",
|
|
'si' : "https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/",
|
|
};
|
|
|
|
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 (
|
|
<Image
|
|
src={`${icon}`}
|
|
width={width}
|
|
height={height}
|
|
style={{
|
|
width,
|
|
height,
|
|
objectFit: "contain",
|
|
maxHeight: "100%",
|
|
maxWidth: "100%",
|
|
}}
|
|
alt={alt}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// check mdi- or si- prefixed icons
|
|
const prefix = icon.split("-")[0];
|
|
|
|
if (prefix in iconSetURLs) {
|
|
// 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 (
|
|
<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")) {
|
|
const iconName = icon.replace(".svg", "");
|
|
return (
|
|
<Image
|
|
src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/svg/${iconName}.svg`}
|
|
width={width}
|
|
height={height}
|
|
style={{
|
|
width,
|
|
height,
|
|
objectFit: "contain",
|
|
maxHeight: "100%",
|
|
maxWidth: "100%"
|
|
}}
|
|
alt={alt}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const iconName = icon.replace(".png", "");
|
|
return (
|
|
<Image
|
|
src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
|
|
width={width}
|
|
height={height}
|
|
style={{
|
|
width,
|
|
height,
|
|
objectFit: "contain",
|
|
maxHeight: "100%",
|
|
maxWidth: "100%"
|
|
}}
|
|
alt={alt}
|
|
/>
|
|
);
|
|
}
|