Is there any way to support paths using "~"? (Nuxt 3)

[digitalcortex]

I wanted to use this plugin for loading svg icons dynamically from my assets folder in Nuxt3 project. However after installing vite-svg-loader, my project stopped supporting paths starting with "~/assets/icons/random.svg".

Is there any way to keep path referencing with "~" and use vite-svg loader at the same time?

[ewilan-riviere]

For Nuxt 3, you could use nuxt-svg-transformer, I work on this module to allow raw SVG import without any path problems.

[davidmyersdev]

Paths using ~/ seem to work fine with Nuxt 3 and this plugin now, fyi.

[mrleblanc101]

Works fine for me too:

<script lang="ts" setup>
import IHamburger from '@/assets/svg/hamburger.svg?component';
import IClose from '@/assets/svg/close.svg?component';
import IClock from '@/assets/svg/clock.svg?component';

// ...

[iBobik]

It is not working in my project. When I enabled this module, all <img src="~/assets… stopped working.

repro: https://stackblitz.com/edit/github-v4ox5u-s1xt1q?file=app.vue

[gkatsanos]

It is not working in my project. When I enabled this module, all <img src="~/assets… stopped working.

repro: https://stackblitz.com/edit/github-v4ox5u-s1xt1q?file=app.vue

You forgot to either append ?url or set the defaultImport option to be url in the config. The default is component so it won't work for img srcs.

Here's your repro fixed: https://stackblitz.com/edit/github-v4ox5u-xehpag?file=nuxt.config.ts,app.vue ( can replace @ with ~ )