无法在离子反应项目中创建动态 IonIcons

Question

我在我的项目中使用了很多组件，在所有这些组件中，每个组件都需要不同的 ionIcon。所以我创建了 Icon 组件。从每个父组件传递给 Icon 子组件的图标名称。但它没有验证。

**

<Icon name="closeCircleOutline" /> \ this is the parent component

Icon Component

import { IonIcon, IonItem } from "@ionic/react";
 import * as iconName from "ionicons/icons";
export default function Icon(props: any) { 
var propsIcon = props.name; // icon name passed from parent component
return <IonIcon icon={iconName.propsIcon}></IonIcon>; 
}

 Property 'propsIcon' does not exist on type 'typeof import("/Users/dubaitradeit/Desktop/Mobile Apps/Ionic/lastMile/node_modules/ionicons/icons/index")'  the above warning iam getting

Answer 1

我想你是想写下面的代码

return <IonIcon icon={iconName.props}></IonIcon>;

您没有引用 'props'，而是引用了图标库中的 'propsIcon'，即 not-existent。希望这能解决您的问题。