wrap SimpleIcon component adapt for dark/light mode

usage:
<SimpleIcon
              klass="w-4 h-4"
              src="https://cdn.simpleicons.org/x"
              alt="X"
            />

Author: yujiym

app/components/layouts/Footer.tsx

@@ -1,5 +1,6 @@
 import LogoIcon from "@/components/icons/Logo";
 import NewsletterPopover from "@/components/ui/$NewsletterPopover";
+import SimpleIcon from "@/components/ui/SimpleIcon";
 import { GITHUB_URL, TELEGRAM_GROUP_LINK, TWITTER_ID } from "@/const";
 
 export default function Footer() {
@@ -12,9 +13,9 @@ export default function Footer() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <img
-              class="w-4 h-4"
-              src="https://cdn.simpleicons.org/x/eee?viewbox=auto"
+            <SimpleIcon
+              klass="w-4 h-4"
+              src="https://cdn.simpleicons.org/x"
               alt="X"
             />
           </a>
@@ -25,18 +26,18 @@ export default function Footer() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <img
-              class="w-4 h-4"
-              src="https://cdn.simpleicons.org/telegram/eee?viewbox=auto"
+            <SimpleIcon
+              klass="w-4 h-4"
+              src="https://cdn.simpleicons.org/telegram"
               alt="Telegram"
             />
           </a>
         </li>
         <li>
           <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
-            <img
-              class="w-4 h-4"
-              src="https://cdn.simpleicons.org/github/eee?viewbox=auto"
+            <SimpleIcon
+              klass="w-4 h-4"
+              src="https://cdn.simpleicons.org/github"
               alt="github"
             />
           </a>

app/components/ui/$NewsletterPopover.tsx

@@ -1,4 +1,5 @@
 import { useState } from "hono/jsx";
+import SimpleIcon from "@/components/ui/SimpleIcon";
 
 const target = "newsletter";
 
@@ -72,10 +73,10 @@ export default function NewsletterDialog() {
         type="button"
         class="hover:text-secondary"
       >
-        <img
-          class="w-4 h-4"
-          src="https://cdn.simpleicons.org/substack/eee?viewbox=auto"
-          alt="github"
+        <SimpleIcon
+          klass="w-4 h-4"
+          src="https://cdn.simpleicons.org/substack"
+          alt="substack"
         />
       </button>
       <div

app/components/ui/SimpleIcon.tsx

@@ -0,0 +1,32 @@
+export default function SimpleIcon({
+  src,
+  alt,
+  klass = "w-4 h-4",
+}: {
+  src: string;
+  alt: string;
+  klass?: string;
+}) {
+  // Remove query params or color paths if present to get clean SVG content for masking
+  // actually, keeping query params like viewbox=auto is fine, but we should strip colors if the user passes them by mistake.
+  // For this implementation, we assume the user (me) will pass the clean URL.
+
+  return (
+    <div
+      aria-label={alt}
+      role="img"
+      class={`${klass} bg-current`}
+      style={{
+        maskImage: `url('${src}')`,
+        maskRepeat: "no-repeat",
+        maskPosition: "center",
+        maskSize: "contain",
+        WebkitMaskImage: `url('${src}')`,
+        WebkitMaskRepeat: "no-repeat",
+        WebkitMaskPosition: "center",
+        WebkitMaskSize: "contain",
+        backgroundColor: "currentColor",
+      }}
+    />
+  );
+}