How to pass the component as a component prop in Qwik?

[tripolskypetr]

Which component is affected?

Qwik Runtime

Describe the bug

In react we can pass the component as a component property. For example

Link to the codesandbox.

interface IButtonProps {
  icon?: React.ComponentType;
  children: React.ReactNode;
}

const Button = ({ icon: Icon, children }: IButtonProps) => (
  <button>
    {Icon && <Icon />}
    {children}
  </button>
);

const DotIcon = (props) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      width="24"
      height="24"
      {...props}
    >
      <circle cx="12" cy="12" r="5" />
    </svg>
  );
};

export default function App() {
  return <Button icon={DotIcon}>Example button</Button>;
}

I notice the PropFunction<(value: T) => void> trick for callbacks but how do I pass the component as a prop exactly?

Reproduction

https://codesandbox.io/p/sandbox/async-firefly-jgcsnp

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Xeon(R) Gold 5220R CPU @ 2.20GHz
    Memory: 18.71 GB / 23.47 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.18.0 - /usr/bin/node
    npm: 10.8.2 - /usr/bin/npm

Additional Information

No response

[octet-stream]

In Qwik there's Slot component if you want to pass components as children, and there's also named Slot (the one with the name property, just like in Vue). This should solve your issue:

import {component$, Slot, PropsOf} from "@builder.io/qwik"

const Button = component$(() => (
  <button>
    {/* named slot has the name attribute */}
    <Slot name="icon" />
    
    {/* And the default slot has none */}
    <Slot />
  </button>
))

export const DotIcon = component$<PropsOf<"svg">>(props => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    width="24"
    height="24"
    {...props}
  >
    <circle cx="12" cy="12" r="5" />
  </svg>
))

export default component$(() => (
  <Button>
    {/* Notice the `q:slot` attribute - this is how you pass the name of the slot. No `q:slot` attribute means it'll project this component into default slot, which is the same as children prop in React */}
    <DotIcon q:slot="icon" />
    Example button
  </Button>
))

See it in action: https://qwik.dev/playground/#f=7VbBDoIwDL3zFUtPkpg5US%2BGeTB68ORHoMISFAV0GuK%2F23UDBOMHmJiQwMa29r22b31LmlnQwKna6A%2BZSeOhkdNzsT04tqEfHfA8i3RJ3QFi%2FUgggzV0zYP1w5xMQiVB4W6o3bU%2FaNC0G57v9zhdZeUGvzqmQudmCMUthsViQE1KYx0nycD9mJ4KCeY%2BwutIa831hGd5PAqEECOzlZYZGVpmdwmCCRZM8bHzB5WmEqIrCu0J5SbNcjuv1a5MJNTLkr2Kk7IdV5xz8ueJQ4c0UjkqJYvQyDgAFj3sO5cwc3SExp8O%2FK8lShhtANzxNUeXeYGU9mheO023DJOperPv%2F4v594r5BQ

Also, unlike with Vue, there's one catch with slots in Qwik: They don't support fallback (meaning you cannot render something as Slot child, so no default elements for slots)

And you should use inline components with caution: They're not the same as those created with component$ marker (read the Limitations section of the docs).