Tengo un conjunto de iconos SVG representados como componentes de React. Algo como eso:
import { IconCancel } from 'icons';Tengo un punto final de back-end que devuelve una matriz de objetos. Cada objeto contiene un nombre de icono.
Ejemplo de objeto:
{ title: 'foo', icon: 'IconSubmit', // other properties... }No sé qué íconos se usarán hasta que obtenga información del backend.
¿Cómo puedo importar dinámicamente íconos del módulo de íconos después de obtener información del backend?
Puede utilizar la importación dinámica.
const [listIcon, setListIcon] = useState([]); useEffect(() => { import('icons').then(res => setListIcon(res) console.log(res) ) }, []) const Component = listIcon[apiObject.icon] return <Component />