I am trying to create a component that will let me pass in the name of the icon I am looking for and import that icon dynamically via unplugin-icons, it seems to be not working whenever the path for the import is dynamic. If I were to just type a string it works fine. Any suggestions? I am using 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 I recieve
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 tried to use the /* vite ignore */ but it did not work
Below is the hardcoded version which works
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 standard import
import IconSun from "~icons/fa-solid/sun";