Update to handle dark mode

Author: davepagurek

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -1,7 +1,8 @@
 import type { ReferenceDocContentItem } from "@/src/content/types";
 import { useMemo, useRef, useState } from "preact/hooks";
-import type { JSX } from "preact";
+import { type JSX } from "preact";
 import { Icon } from "../Icon";
+import flask from "@src/content/ui/images/icons/flask.svg?raw"; 
 
 type ReferenceDirectoryEntry = ReferenceDocContentItem & {
   data: {
@@ -94,12 +95,9 @@ export const ReferenceDirectoryWithFilter = ({
                 class="text-body-mono group-hover:underline"
               >
                 {entry.data.beta && (
-                  <img
-                    className="inline-block align-center mr-2"
-                    src="/icons/flask.svg"
-                    alt="(Experimental)"
-                    width={16}
-                    height={16}
+                  <div
+                    className="inline-block mr-2 w-[16px] h-[16px] mb-[-2px]"
+                    dangerouslySetInnerHTML={{ __html: flask }}
                   />
                 )}
                 <span dangerouslySetInnerHTML={{ __html: entry.data.title }} />

public/icons/flask.svg renamed to src/content/ui/images/icons/flask.svg

@@ -19,6 +19,7 @@ import type {
 } from "@/types/parsers.interface";
 import { setJumpToState } from "../globals/state";
 import { p5Version } from "../globals/p5-version";
+import flask from "@src/content/ui/images/icons/flask.svg?raw"; 
 
 const { entry, relatedEntries } = Astro.props;
 const currentLocale = getCurrentLocale(Astro.url.pathname);
@@ -91,12 +92,9 @@ const seenParams: Record<string, true> = {};
       {entry.data.beta && (
         <div class="experimental">
           <h5>
-            <img
-              class="inline-block align-center"
-              src="/icons/flask.svg"
-              alt="(Experimental)"
-              width={20}
-              height={20}
+            <div
+              class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
+              set:html={flask}
             />
             {t('experimentalApi', 'title')}
           </h5>