From f692e71991ba39d2bb174eab091ed2c1a6f039ee Mon Sep 17 00:00:00 2001 From: David Date: Mon, 1 May 2023 14:06:05 -0400 Subject: [PATCH] Add Support for Simple Icons + Add optional theme colors for icons (#1438) * 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> --- src/components/resolvedicon.jsx | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx index d503fe9d..816b1395 100644 --- a/src/components/resolvedicon.jsx +++ b/src/components/resolvedicon.jsx @@ -1,6 +1,18 @@ +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 ( @@ -18,9 +30,14 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log ); } - // mdi- prefixed, material design icons - if (icon.startsWith("mdi-")) { - const iconName = icon.replace("mdi-", "").replace(".svg", ""); + // check mdi- or si- prefixed icons + const prefix = icon.split("-")[0] + + if (prefix in iconSetURLs) { + // get icon source + const iconName = icon.replace(`${prefix}-`, "").replace(".svg", ""); + const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`; + return (
);