Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

impl. mdi icons with the possibility for others

Browse Source
This commit is contained in:
Ben Phelps 2022-10-11 15:02:38 +03:00
parent 248c18d978
commit c95422b682
1 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/services/item.jsx
View File

@ -9,19 +9,37 @@ import Docker from "widgets/docker/component";
import { SettingsContext } from "utils/contexts/settings"; import { SettingsContext } from "utils/contexts/settings";
function resolveIcon(icon) { function resolveIcon(icon) {
if (icon.startsWith("http")) { // direct or relative URLs
return icon; if (icon.startsWith("http") || icon.startsWith("/")) {
return <Image src={`${icon}`} width={32} height={32} alt="logo" />;
} }
if (icon.startsWith("/")) { // mdi- prefixed, material design icons
return icon; if (icon.startsWith("mdi-")) {
const iconName = icon.replace("mdi-", "").replace(".svg", "");
return (
<div
style={{
width: 32,
height: 32,
background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
mask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${iconName}.svg) no-repeat center / contain`,
WebkitMask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${iconName}.svg) no-repeat center / contain`,
}}
/>
);
} }
if (icon.endsWith(".png")) { // fallback to dashboard-icons
return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`; const iconName = icon.replace(".png", "");
} return (
<Image
return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`; src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
width={32}
height={32}
alt="logo"
/>
);
} }
export default function Item({ service }) { export default function Item({ service }) {
@ -57,12 +75,10 @@ export default function Item({ service }) {
rel="noreferrer" rel="noreferrer"
className="flex-shrink-0 flex items-center justify-center w-12 " className="flex-shrink-0 flex items-center justify-center w-12 "
> >
<Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" /> {resolveIcon(service.icon)}
</a> </a>
) : ( ) : (
<div className="flex-shrink-0 flex items-center justify-center w-12 "> <div className="flex-shrink-0 flex items-center justify-center w-12 ">{resolveIcon(service.icon)}</div>
<Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
</div>
))} ))}
{hasLink ? ( {hasLink ? (