I'm currently working on developing a component that allows me to dynamically import icons based on the provided icon name using unplugin-icons. However, I'm facing an issue where dynamic imports don't seem to work when the import path is dynamic. Interestingly, if I hardcode the string, it works perfectly fine. Any ideas on how to resolve this? My tech stack includes Nuxt 3 and Vite.
interface Icon {
name: string;
}
const props = defineProps<Icon>();
const sun = "sun";
const icon = await import(`~icons/fa-solid/${sun}`);
const PropIcon = defineComponent(icon.default);
Below is the error message I encounter:
const props = __props;
12 | const sun = "sun";
13 | const icon = ([__temp, __restore] = _withAsyncContext(() => import(`~icons/fa-solid/${sun}`)), __temp = await __temp, __restore(), __temp);
| ^
14 | const PropIcon = defineComponent(icon.default);
15 | const __returned__ = { props, sun, icon, PropIcon };
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
I attempted to use /* vite ignore */ but unfortunately, it didn't solve the problem.
Here's the hardcoded version which is functioning:
interface Icon {
name: string;
}
const props = defineProps<Icon>();
const sun = "sun";
const icon = await import(`~icons/fa-solid/sun`);
const PropIcon = defineComponent(icon.default);
And here is the standard import example:
import IconSun from "~icons/fa-solid/sun";