Ionic React TypeScript动态IonIcon复用问题求助

你代码里的核心问题是**quickOptions数组中icon字段的定义错误**：你把图标变量用{}包裹成了对象（比如{ personOutline }），但IonIcon的icon属性需要接收的是图标本身的引用（也就是personOutline这种直接的函数/变量），而非键值对对象。传递element.icon时实际传给组件的是一个对象，自然无法正常渲染图标。

解决步骤 #

1. 修正数组内的icon值
   去掉包裹图标的{}，直接引用图标变量：

   const quickOptions = [
     { title: "Jouw consulent", icon: personOutline },
     { title: "Jouw afspraken", icon: alarmOutline },
     { title: "Jouw bestellingen", icon: cartOutline },
   ];
   

2. （可选但推荐）替换any类型，提升代码安全性
   导入Ionic图标的类型定义，明确quickOptions的类型，避免使用any：

   import type { Icon } from 'ionicons/icons';
   
   type QuickOption = {
     title: string;
     icon: Icon;
   };
   

3. 修正组件名拼写错误
   原代码中组件名quichOptions是拼写错误，改成quickOptions避免潜在问题。

完整修正代码 #

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

type QuickOption = {
  title: string;
  icon: Icon;
};

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

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

内容的提问来源于stack exchange，提问作者Luuk van Dijk