[Solved]-React dynamic import based on the prop from parent-Reactjs

If you want to avoid doing a switch, you could build an object with your imports:

const icons = {
  svg1,
  svg2,
  svg3,
};

const Child = (props) => {
  const Component = icons[props.icon];
  return <Component />;
};

You could try using the image tag, like this;

import svg1 from './svg1.js'
import svg2 from './svg2.js'
import svg3 from './svg3.js'


<Parent>
 <Child icon={svg1} />
 <Child icon={svg2} />
 <Child icon={svg3} />
</Parent>

Child

return (
 <div>
  <img src={output} />
 </div>
)

Based on this one - https://sung.codes/blog/2017/12/03/loading-react-components-dynamically-demand/

I finally get the solution:

const { icon } = props
const [components, setComponents] = useState([])

const addComponent = async (icon) => {
    import(`./${icon}.js`)
        .then((component) => {
            setComponents(components.concat(component.default))
        })
        .catch((error) => {
            console.error(`"${icon}" not yet supported`)
        })
}

const getElement = async (icon) => {
    await addComponent(icon)
}

useEffect(() => {
    console.log("icon", icon)
    getElement(icon)
}, [])

const componentsElements = components.map((Component) => <Component />)
...
return <div>{componentsElements}</div>