带有反应的动态离子图标 typescript

Question

I want to make my IonIcons dynamic so they are reusable. But i need to set it in {} I dont know how i do this with a.map() element.

import React from "react";
import { IonIcon, IonLabel } from "@ionic/react";
import styles from "./quickOptions.module.css";
import { alarmOutline, personOutline, cartOutline } from "ionicons/icons";

export default function quichOptions() {
  const quickOptions = [
    { title: "Jouw consulent", icon: { personOutline } },
    { title: "Jouw afspraken", icon: { alarmOutline } },
    { title: "Jouw bestellingen", icon: { cartOutline } },
  ];

  return (
    <div className={styles.mainContainer}>
      {quickOptions?.map((element: any) => {
        return (
          <div key={element.title} className={styles.btnContainer}>
            <IonLabel>{element.title}</IonLabel>
            <IonIcon icon={element.icon} size="large" /> //here
          </div>
        );
      })}
    </div>
  );
}

Element.icon does not give the output of {personOutline} for example does anybody know how to fix this??

Answer 1

you can check console.log(typeof element.icon)

const quickOptions = [ { title: "Jouw consulent", icon: 'personOutline' }, ];

<IonIcon icon={element.icon} size="large" />

if the icon type here is {string}, that's why it doesn't work
try it in quickOptions, icon: personOutline or icon: 'personOutline'