Redo productIcons with component$

Author: palfrey

web/platform/astro.config.ts

@@ -38,7 +38,7 @@ export default defineConfig({
   },
   integrations: [
     qwik({
-      include: ["**/components/qwik/**/*"],
+      include: ["**/components/qwik/**/*", "**/components/media/icons/**"],
     }),
     react({
       include: ["**/components/react/*"],

web/platform/bun.lock

@@ -16,7 +16,8 @@
     "@deno/astro-adapter": "https://github.com/florian-lefebvre/denoland_deno-astro-adapter/tarball/feat/v6",
     "@lhci/cli": "^0.14.0",
     "@lorenzo_lewis/starlight-utils": "^0.3.2",
-    "@qwikdev/astro": "^0.8.3",
+    "@qwik.dev/astro": "^1",
+    "@qwik.dev/core": "2.0.0-beta.29",
     "@qwikest/icons": "^0.0.13",
     "@react-three/drei": "^10.0.7",
     "@react-three/fiber": "^9.1.2",

web/platform/package.json

@@ -1,10 +1,9 @@
-import type { PropsOf } from "@builder.io/qwik";
+import { component$, type PropsOf } from "@qwik.dev/core";
 
-export const CAS = (props: PropsOf<"svg">, key: string) => {
+export const CAS = component$<PropsOf<"svg">>((props) => {
   return (
     <svg
       {...props}
-      key={key}
       preserveAspectRatio="xMidYMid meet"
       data-bbox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
@@ -49,13 +48,12 @@ export const CAS = (props: PropsOf<"svg">, key: string) => {
       </g>
     </svg>
   );
-};
+});
 
-export const Security = (props: PropsOf<"svg">, key: string) => {
+export const Security = component$<PropsOf<"svg">>((props) => {
   return (
     <svg
       {...props}
-      key={key}
       preserveAspectRatio="xMidYMid meet"
       data-bbox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
@@ -100,13 +98,12 @@ export const Security = (props: PropsOf<"svg">, key: string) => {
       </g>
     </svg>
   );
-};
+});
 
-export const RBE = (props: PropsOf<"svg">, key: string) => {
+export const RBE = component$<PropsOf<"svg">>((props) => {
   return (
     <svg
       {...props}
-      key={key}
       preserveAspectRatio="xMidYMid meet"
       data-bbox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
@@ -151,13 +148,12 @@ export const RBE = (props: PropsOf<"svg">, key: string) => {
       </g>
     </svg>
   );
-};
+});
 
-export const FreeCloud = (props: PropsOf<"svg">, key: string) => {
+export const FreeCloud = component$<PropsOf<"svg">>((props) => {
   return (
     <svg
       {...props}
-      key={key}
       preserveAspectRatio="xMidYMid meet"
       data-bbox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
@@ -202,4 +198,4 @@ export const FreeCloud = (props: PropsOf<"svg">, key: string) => {
       </g>
     </svg>
   );
-};
+});