Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-10-31 06:24:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Support for Simple Icons + Add optional theme colors for icons (#1438)

Browse Source 
* add support for simple-icons si- prefix

* add iconStyle setting

* lowercase comment

* add supported prefix comment

* Apply suggestions from code review

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
David 2023-05-01 14:06:05 -04:00 committed by GitHub
parent f4ffc2d29b
commit f692e71991
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/resolvedicon.jsx
View File

@ -1,6 +1,18 @@
import { useContext } from "react";
import Image from "next/future/image"; 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" }) { export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "logo" }) {
const { settings } = useContext(SettingsContext);
const { theme } = useContext(ThemeContext);
// direct or relative URLs // direct or relative URLs
if (icon.startsWith("http") || icon.startsWith("/")) { if (icon.startsWith("http") || icon.startsWith("/")) {
return ( return (
@ -18,9 +30,14 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
); );
} }
// mdi- prefixed, material design icons // check mdi- or si- prefixed icons
if (icon.startsWith("mdi-")) { const prefix = icon.split("-")[0]
const iconName = icon.replace("mdi-", "").replace(".svg", "");
if (prefix in iconSetURLs) {
// get icon source
const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
return ( return (
<div <div
style={{ style={{
@ -28,9 +45,11 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
height, height,
maxWidth: '100%', maxWidth: '100%',
maxHeight: '100%', maxHeight: '100%',
background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))", background: settings.iconStyle === "theme" ?
mask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${iconName}.svg) no-repeat center / contain`, `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity))` :
WebkitMask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${iconName}.svg) no-repeat center / contain`, "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
mask: `url(${iconSource}) no-repeat center / contain`,
WebkitMask: `url(${iconSource}) no-repeat center / contain`,
}} }}
/> />
); );