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)