我在Vue3中设置了以下卡网格：

<template>
  <div class="max-w-5xl mx-auto">
    <div class="ml-20 pr-72">
      <h2 class="text-4xl pb-8">{{ title }}</h2>
      <p class="font-normal text-base pb-20">{{ description }}</p>
    </div>
    <div class="grid grid-cols-2 gap-5">
      <div
        v-for="card in cards"
        :key="card.title"
        class="rounded-xl py-6 px-5 bg-cover bg-center flex flex-col justify-between items-start h-60"
        :style="{ backgroundImage: `url(${card.imageUrl})` }"
      >
        <div
          class="rounded-full p-4 bg-gradient-to-r from-prospire-blue to-prospire-light-blue"
        >
          {{ card.icon }}
        </div>
        <p class="text-white font-light text-2xl">{{ card.title }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string;
  description: string;
  cards: any[];
}>();
</script>

<style scoped></style>

我称之为使用：

<CardGrid
    :title="$t('aboutUs.cardGrid.title')"
    :description="$t('aboutUs.cardGrid.description')"
    :cards="[
      {
        title: $t('aboutUs.cardGrid.cards[0].title'),
        imageUrl:
          'https://images.pexels.com/photos/5595573/pexels-photo-5595573.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
        icon: <BeakerIcon />,
      },
   ]"
/>

然而，这给了我一个BeakerIcon' refers to a value, but is being used as a type here. Did you mean 'typeof BeakerIcon'?错误。是否可以通过某种方式将第三方组件（本例中为图标）传递给组件？