Can we use Components inside an Array Object to render it later?

[toxic dove]

Can we do this with Astro?

---
import Icon from "icon.astro";

const features = [
  {
    title: "title",
    icon: `<Icon />`,
  },
  ...
---
{features.map((item) => (
       <div>{item.title}</div>
       <div>{item.icon}</div>
))}

So, essentially, I would want to import an astro component, assign it to an array of objects, then finally render them. In react, I would be able to do this, so how this would work for Astro? The above code doesn't work.

[errant viper]

Yes, here's how IIRC

---
import Icon from "icon.astro";

const features = [
  {
    title: "title",
    icon: Icon.default,
  },
  ...
---
{features.map((item) => (
       <div>{item.title}</div>
       <div>
           <item.icon />
       </div>
))}