Search code examples
vue.jsfrontendnuxt.jssvgo

using the nuxt-svgo module, SVGs are not being loaded or "found"

I want to be able to import and use SVGs directly in a nuxt project i'm working on, I added the nuxt-svgo module, i place my SVGs in a svg directory in the assets directory and configured the nuxt-svgo or svgo in/through the nuxt.config.ts file to this:

svgo: { autoImportPath: '~/assets/svg/' }

however in another vue file where i try using a SVG like so:

<script setup lang="ts">
import { SvgoBackspace } from '#build/components';
</script>

<template>
  <SvgoBackspace class="w-7 inline" />
</template>

i get this error: a windows 10 screen snip of the vs code terminal of the error

i have not tried much, just editing the nuxt.config.ts 'cos i'm kind of new to nuxt, and not sure what goes where

Solution

  • By removing the import, OP achieved to have some working solution.

    The module nuxt-svgo indeed imports the icons automatically thanks to autoImportPath, just like a usual Nuxt component would behave.