Open SeppeP opened 2 years ago
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>
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)
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?