fix(docs): noserialize icons

Author: Varixo

packages/docs/src/components/on-this-page/on-this-page-more.tsx

@@ -0,0 +1,66 @@
+import { component$, noSerialize } from '@qwik.dev/core';
+import { EditIcon } from '../svgs/edit-icon';
+import { AlertIcon } from '../svgs/alert-icon';
+import { ChatIcon } from '../svgs/chat-icon';
+import { GithubLogo } from '../svgs/github-logo';
+import { TwitterLogo } from '../svgs/twitter-logo';
+
+type OnThisPageMoreProps = {
+  theme: 'light' | 'dark' | 'auto';
+  editUrl: string;
+};
+
+export const OnThisPageMore = component$<OnThisPageMoreProps>(({ theme, editUrl }) => {
+  const OnThisPageMore = [
+    {
+      href: editUrl,
+      text: 'Edit this Page',
+      // TODO: fix serializing the icon
+      icon: noSerialize(EditIcon),
+    },
+    {
+      href: 'https://github.com/QwikDev/qwik/issues/new/choose',
+      text: 'Create an issue',
+      icon: noSerialize(AlertIcon),
+    },
+    {
+      href: 'https://qwik.dev/chat',
+      text: 'Join our community',
+      icon: noSerialize(ChatIcon),
+    },
+    {
+      href: 'https://github.com/QwikDev/qwik',
+      text: 'GitHub',
+      icon: noSerialize(GithubLogo),
+    },
+    {
+      href: 'https://twitter.com/QwikDev',
+      text: '@QwikDev',
+      icon: noSerialize(TwitterLogo),
+    },
+  ];
+  return (
+    <>
+      <h6>More</h6>
+      <ul class="px-2 font-medium text-[var(--interactive-text-color)]">
+        {OnThisPageMore.map((el, index) => {
+          return (
+            <li
+              class={`${
+                theme === 'light'
+                  ? 'hover:bg-[var(--qwik-light-blue)]'
+                  : 'hover:bg-[var(--on-this-page-hover-bg-color)]'
+              } rounded-lg`}
+              key={`more-items-on-this-page-${index}`}
+            >
+              <a class="more-item" href={el.href} rel="noopener" target="_blank">
+                {el.icon && <el.icon width={20} height={20} />}
+                <span>{el.text}</span>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+});

packages/docs/src/components/on-this-page/on-this-page.tsx

@@ -1,12 +1,8 @@
 import { $, component$, useContext, useOnDocument, useSignal, useStyles$ } from '@qwik.dev/core';
 import { useContent, useLocation } from '@qwik.dev/router';
 import { GlobalStore } from '../../context';
-import { AlertIcon } from '../svgs/alert-icon';
-import { ChatIcon } from '../svgs/chat-icon';
-import { EditIcon } from '../svgs/edit-icon';
-import { GithubLogo } from '../svgs/github-logo';
-import { TwitterLogo } from '../svgs/twitter-logo';
 import styles from './on-this-page.css?inline';
+import { OnThisPageMore } from './on-this-page-more';
 
 const QWIK_GROUP = [
   'components',
@@ -117,39 +113,9 @@ export const OnThisPage = component$(() => {
   const contentHeadings = headings?.filter((h) => h.level <= 3) || [];
 
   const { url } = useLocation();
-
   const githubEditRoute = makeEditPageUrl(url.pathname);
-
   const editUrl = `https://github.com/QwikDev/qwik/edit/main/packages/docs/src/routes/${githubEditRoute}/index.mdx`;
 
-  const OnThisPageMore = [
-    {
-      href: editUrl,
-      text: 'Edit this Page',
-      icon: EditIcon,
-    },
-    {
-      href: 'https://github.com/QwikDev/qwik/issues/new/choose',
-      text: 'Create an issue',
-      icon: AlertIcon,
-    },
-    {
-      href: 'https://qwik.dev/chat',
-      text: 'Join our community',
-      icon: ChatIcon,
-    },
-    {
-      href: 'https://github.com/QwikDev/qwik',
-      text: 'GitHub',
-      icon: GithubLogo,
-    },
-    {
-      href: 'https://twitter.com/QwikDev',
-      text: '@QwikDev',
-      icon: TwitterLogo,
-    },
-  ];
-
   const useActiveItem = (itemIds: string[]) => {
     const activeId = useSignal<string | null>(null);
     useOnDocument(
@@ -214,29 +180,9 @@ export const OnThisPage = component$(() => {
               </li>
             ))}
           </ul>
+          <OnThisPageMore theme={theme.theme} editUrl={editUrl} />
         </>
       ) : null}
-
-      <h6>More</h6>
-      <ul class="px-2 font-medium text-[var(--interactive-text-color)]">
-        {OnThisPageMore.map((el, index) => {
-          return (
-            <li
-              class={`${
-                theme.theme === 'light'
-                  ? 'hover:bg-[var(--qwik-light-blue)]'
-                  : 'hover:bg-[var(--on-this-page-hover-bg-color)]'
-              } rounded-lg`}
-              key={`more-items-on-this-page-${index}`}
-            >
-              <a class="more-item" href={el.href} rel="noopener" target="_blank">
-                <el.icon width={20} height={20} />
-                <span>{el.text}</span>
-              </a>
-            </li>
-          );
-        })}
-      </ul>
     </aside>
   );
 });