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

Question

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

**

<Icon name="closeCircleOutline" /> \ this is the parent 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>; 
}

类型"typeof"上不存在属性"propsIcon"导入("/Users/dubaitradit/Datadesk/MobileApps/Ionial/lastMile/node_modules/ionicons/icons/index"(’上面的警告是

Answer 1

我想你是想写下面的代码

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

您没有引用"props"，而是引用了图标库中不存在的"propsIcon"。希望这能纠正你的问题。