fix(docs): icon serialization

Author: wmertens

packages/docs/src/components/svgs/bluesky-logo.tsx

@@ -1,9 +1,11 @@
+import { component$ } from '@qwik.dev/core';
+
 interface Props {
   width: number;
   height: number;
 }
 
-export const BlueskyLogo = ({ width, height }: Props) => (
+export const BlueskyLogo = component$(({ width, height }: Props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={width}
@@ -17,4 +19,4 @@ export const BlueskyLogo = ({ width, height }: Props) => (
       d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805zm36.254 0C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745z"
     />
   </svg>
-);
+));

packages/docs/src/components/svgs/discord-logo.tsx

@@ -1,11 +1,12 @@
 import type { PropsOf } from '@qwik.dev/core';
+import { component$ } from '@qwik.dev/core';
 
 type DiscordLogoProps = {
   width: number;
   height: number;
 } & PropsOf<'svg'>;
 
-export const DiscordLogo = ({ width, height }: DiscordLogoProps) => (
+export const DiscordLogo = component$(({ width, height }: DiscordLogoProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={width}
@@ -18,4 +19,4 @@ export const DiscordLogo = ({ width, height }: DiscordLogoProps) => (
     <path d="M464 66.52A50 50 0 00414.12 17L97.64 16A49.65 49.65 0 0048 65.52V392c0 27.3 22.28 48 49.64 48H368l-13-44 109 100zM324.65 329.81s-8.72-10.39-16-19.32C340.39 301.55 352.5 282 352.5 282a139 139 0 01-27.85 14.25 173.31 173.31 0 01-35.11 10.39 170.05 170.05 0 01-62.72-.24 184.45 184.45 0 01-35.59-10.4 141.46 141.46 0 01-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62 19.09 42.38 28.26c-7.27 9.18-16.23 19.81-16.23 19.81-53.51-1.69-73.85-36.47-73.85-36.47 0-77.06 34.87-139.62 34.87-139.62 34.87-25.85 67.8-25.12 67.8-25.12l2.42 2.9c-43.59 12.32-63.44 31.4-63.44 31.4s5.32-2.9 14.28-6.77c25.91-11.35 46.5-14.25 55-15.21a24 24 0 014.12-.49 205.62 205.62 0 0148.91-.48 201.62 201.62 0 0172.89 22.95s-19.13-18.15-60.3-30.45l3.39-3.86s33.17-.73 67.81 25.16c0 0 34.87 62.56 34.87 139.62 0-.28-20.35 34.5-73.86 36.19z" />
     <path d="M212.05 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.8 0 24.7-11.83 24.7-26.57.25-14.76-10.9-26.57-24.7-26.57zM300.43 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.81 0 24.7-11.83 24.7-26.57S314 218 300.43 218z" />
   </svg>
-);
+));

packages/docs/src/components/svgs/github-logo.tsx

@@ -1,9 +1,11 @@
+import { component$ } from '@qwik.dev/core';
+
 interface GithubLogoProps {
   width: number;
   height: number;
 }
 
-export const GithubLogo = ({ width, height }: GithubLogoProps) => (
+export const GithubLogo = component$(({ width, height }: GithubLogoProps) => (
   <svg
     viewBox="0 0 16 16"
     width={width}
@@ -14,4 +16,4 @@ export const GithubLogo = ({ width, height }: GithubLogoProps) => (
   >
     <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
   </svg>
-);
+));

packages/docs/src/components/svgs/twitter-logo.tsx

@@ -1,9 +1,11 @@
+import { component$ } from '@qwik.dev/core';
+
 interface TwitterLogoProps {
   width: number;
   height: number;
 }
 
-export const TwitterLogo = ({ width, height }: TwitterLogoProps) => (
+export const TwitterLogo = component$(({ width, height }: TwitterLogoProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={width}
@@ -15,4 +17,4 @@ export const TwitterLogo = ({ width, height }: TwitterLogoProps) => (
   >
     <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
   </svg>
-);
+));