get icon from mui dynamicly
hello im trying to dynamicly load icon from mui this is the code
import React from "react";
import * as MuiIcons from "@mui/icons-material";
console.log("MuiIcons: ", MuiIcons);
const Icon = ({ iconName }) => {
return <div>{MuiIcons[iconName]}</div>;
};
export default Icon;
but i get this error instead
react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-dom.development.js:14887:9)
at reconcileChildFibers2 (react-dom.development.js:15828:7)
at reconcileChildren (react-dom.development.js:19167:28)
at updateHostComponent (react-dom.development.js:19924:3)
at beginWork (react-dom.development.js:21618:14)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27451:7)
at performUnitOfWork (react-dom.development.js:26557:12)
any idea how to solve it ? thank you in advance
8 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
thank you so much bro this works for me
i really appreciate
it
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yeah i need to load the icon based on their name
do you have another idea to do this ?
?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
okay i used react lazy and suspence before to load the icon when you give the name to the component but dynamic load not supported in vite so i did that methode
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
thank you bro
you really hoped me
i really appreciate it