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";