How can I use a component as a variable when using Svelte and Carbon Components?

Question

When using Carbon Component for Svelte, is it possible to assign a component as a variable, and then pass that variable to a prop?

For example, I'm using the <Modal /> component, whose primary button exposes a primaryButtonIcon prop; I want to assign different icons depending on the state.

Something like this:

let uploadStatus: "active" | "inactive" | "finished" | "error" | undefined = "active";
let primaryButtonIcon: WHAT? = <InlineLoading status={uploadStatus} />;

<Modal primaryButtonIcon={primaryButtonIcon} />

But what should I declare the primaryButtonIcon as?

---

UPDATE:
When I use ...

let uploadStatus: "active" | "inactive" | "finished" | "error" | undefined = "active";
let primaryButtonIcon: typeof SvelteComponent<any> = <InlineLoading status={uploadStatus} />;

... there are errors ...

The error relating to uploadStatus is ...

Cannot redeclare block-scoped variable 'uploadStatus'. ts(2451)

The error relating to primaryButtonIcon is ...

Property 'prototype' is missing in type 'SvelteComponentTyped<InlineLoadingProps, { click: MouseEvent; mouseover: MouseEvent; mouseenter: MouseEvent; mouseleave: MouseEvent; success: CustomEvent<...>; }, {}>' but required in type 'typeof SvelteComponent'. ts(2741)

And the error relating to <InlineLoading /> is ...

Conversion of type 'string' to type 'InlineLoading' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. ts(2352)

Have I declared something wrongly?

Answer 1

The type is shown right in the docs in the "Type" column, it's the base component type from svelte, so:

import { type SvelteComponent } from 'svelte';
let primaryButtonIcon: typeof SvelteComponent<any> = ...

(Though one should generally use ComponentType instead.)

But, you cannot define markup inline in Svelte. It has to be extracted to a self-contained component file.

(In Svelte 5 snippets allow referencing pieces of markup in the script.)