Dynamically loading vector images
Unanswered
Sjoerd posted this in #help-forum
SjoerdOP
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={
>
<IconVector />
</a>
);
}
})}
{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>
);
}
})}