I have only been programming with react for a short time and I don't know if there is a more efficient way to perform this task. I have a series of files that correspond to some svg files. An example would be the following.
export default function CheckIcon(props) {
return (
<Icon {...props}>
options={ CheckIcon }
/>
);
}
CheckIcon.displayName = 'CheckIcon';
then I import them into a component that I call Icon.js where I make a switch for each of the cases and return the corresponding component.
import React from 'react';
import CloseIcon from './icons/CloseIcon';
import CheckIcon from './icons/CheckIcon';
import SumIcon from './icons/SumIcon';
import SubtractIcon from './icons/SubtractIcon';
import MultiplyIcon from './icons/MultiplyIcon';
import DivideIcon from './icons/DivideIcon';
export default function Icon({ type, ...props }) {
const getIcon = () => {
switch (type) {
case 'close':
return <CloseIcon {...props} />;
case 'check':
return <CheckIcon {...props} />;
case 'sum':
return <SumIcon {...props} />;
case 'subtract':
return <SubtractIcon {...props} />;
case 'multiply':
return <MultiplyIcon {...props} />;
case 'divide':
return <DivideIcon {...props} />;
default:
break;
}
};
return getIcon();
}
and finally I import the Icon.js file into the component where I am going to display my html
<div>
{() => {
return (
<Icon type="close" />
<Icon type="check" />
<Icon type="sum" />
<Icon type="subtract" />
<Icon type="multiply" />
<Icon type="divide" />
);
}}
</div>
My question is, is there a more efficient way to dynamically import into my Icon.js component the different components that correspond to each of the seg?
thank you all for your time and help in advance.