Next.js Discord

Discord Forum

Dynamically loading vector images

Unanswered
Sjoerd posted this in #help-forum
Open in Discord
I try to show a vector image based on a users input, but I get: ‘Error: Cannot find module <link to the url>’. I know this works when you load the vector outside of the component but that is not possible here because I get the url from the user. I don't want to use next/image because I want to be able to change the color of the vector. How do I solve this?

{props.footerData.socials.map((social, index) => {
const IconVector = dynamic(() =>
import(social.icon.url));

if (IconVector) {
return (
<a
href={social.url}
key={social-link-${index}}
>
<IconVector />
</a>
);
}
})}

0 Replies