implementation with Nuxt 3

[SeppeP]

I'm confused on how I should import 'virtual:svg-icons-register' in Nuxt3. it says it should be imported in main.ts, but Nuxt3 does not have such file.

Can anyone help me?

[razorness]

Imagine having your svg icons in /assets/icon:

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default defineNuxtConfig({

    // other config stuff ...

    vite: {
        plugins: [
            createSvgIconsPlugin({
                // Specify the icon folder to be cached
                iconDirs: [
                    path.resolve(process.cwd(), 'assets/icon')
                ],
                // Specify symbolId format
                symbolId: 'icon-[dir]-[name]',

                /**
                 * custom dom id
                 * @default: __svg__icons__dom__
                 */
                customDomId: '__svg__icons__dom__'
            })
        ]
    },
})

app.vue

<template>
    <NuxtLayout>
        <NuxtPage/>
    </NuxtLayout>
</template>

<script lang="ts">
    import 'virtual:svg-icons-register'
    import { defineComponent } from 'vue';

    export default defineComponent({
        // ....
    });
</script>

[strange-qwq]

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default defineNuxtConfig({

  // other config stuff ...

  vite: {
      plugins: [
          createSvgIconsPlugin({
              // Specify the icon folder to be cached
              iconDirs: [
                  path.resolve(process.cwd(), 'assets/icon')
              ],
              // Specify symbolId format
              symbolId: 'icon-[dir]-[name]',

              /**
               * custom dom id
               * @default: __svg__icons__dom__
               */
              customDomId: '__svg__icons__dom__'
          })
      ]
  },
})

After adding the above code to nuxt.config.ts, each time the project is started, it will throw:

ERROR Failed to resolve import" fsevents "from" node_modules . Vite deps chunk-KQZLUP43. js? V=c1f8370a ". Does the file exist? (x3)