How to dynamically import?

[nsd0kleuschner]

Hey,

sometimes I need to dynamically import icons. E.g.:

<component is="svgo-car" />

is not working.

I've tried this:

const getIcon = (name: string) => defineAsyncComponent(() => import(~/assets/icons/${name}.svg))

This is working, but i don't know if i bypass the plugin. And also I need subfolders like "/icons/folder/icon.svg" which is not working this way (error).

[jd1378]

Hi

is your global option true ?

[jd1378]

also this may be relevant: https://github.com/cpsoinos/nuxt-svgo/issues/191

[nsd0kleuschner]

Thanks for your response.

With global: true I get:

[vite-node] [plugin:unctx:transform] [VITE_ERROR] virtual:nuxt:PATH.nuxt/components.plugin.mjs:2:2394

then comes a list with lazy icons. And finally:

3 |  const lazyGlobalComponents = [
4  |    ["IAccountCircleLoggedIn", LazyIAccountCircleLoggedIn],

[jd1378]

well I'm not sure why with global true you get an error, it may be a bug in nuxt itself, since I have only exposed the option

so you managed to resolve the issue ?

[nsd0kleuschner]

I'm trying to figure it out, but I'm not seeing anything, that could produce this error. Also I do not find anything that could me help to get it working. So you don't have an idea how to fix this, right?

[jd1378]

Well without global: true you can't really do it the way you are trying to do

Instead, what you can do is to import all components you need first, and use them directly. Sth like this:

<script setup>
import {IconOne, IconTwo} from "#components"

const icons = [ IconOne, IconTwo ]
</script>

<template>
  <component :is="icons[0]" />
</template>

[jd1378]

You can also import the Lazy versions instead as well

[nsd0kleuschner]

okay, thanks. I don't want to list each icon. In most cases I use and this is working. But in some cases I have a dynamic string and for this it seems that I need global: true But with my error when I setting this, I'm not getting this working.

Maybe I have to use something completely global like this: https://github.com/nuxt-community/svg-module/issues/86#issuecomment-1344324425

[jd1378]

I'm generally not a fan of Vite globe imports, since it was causing my bundle size to explode that may have changed since last time I checked though

but I'm afraid I can't help you more on this