0

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";
kissu
  • 40,416
  • 14
  • 65
  • 133
Luke Longo
  • 119
  • 1
  • 7
  • `it seems to be not working`, what is happening exactly? – kissu Jun 30 '22 at 19:23
  • For some reason I am having issues getting a dynamic import to work inside the spa, I am not too familiar with the dynamic imports as a whole so I could be doing something incorrectly. – Luke Longo Jun 30 '22 at 20:19

1 Answers1

0

Well vite already give you the answer just read it:

If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

Vite cannot analyze the importing module because it cant know the value of sun

You need to surpress this error if this is intended:

const icon = await import( /* @vite-ignore */` ~icons/fa-solid/${sun}`);
bill.gates
  • 14,145
  • 3
  • 19
  • 47