Allow loading SVG images from HTML without breaking the current syntax (Nuxt)

[MisaoDev]

I have the library set up to work with both inline and external SVGs.

Before installing it, I could load SVG images in my HTML like this:

:src="require('~/assets/img/my-image.svg')"   (dynamic)
src="~/assets/img/my-image.svg"               (static)

But this no longer works. The only way to load .svg files as regular images is to import them, then add them in a computed property/data, and then use that in a :src attribute. This takes a lot more lines of code and even seems to perform a little slower. Another big downside is that if I install the library in a huge project that uses a lot of SVG images, it will break them all. And is there even a way to load the files dynamically? (e.g.: my-image-{myReactiveProperty}.svg).

So I'm either forced to change all my SVG images into vue-svg-loader components, or set up the import method which will take pretty much the same effort. Either way using the library inevitably breaks the current code with regular syntax.

I'm using Nuxt 2 with Vuetify, and the exact same config as in the FAQ:

      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
      svgRule.test = /\.(png|jpe?g|gif|webp)$/;

      config.module.rules.push({
        test: /\.svg$/,
        oneOf: [
          {
            resourceQuery: /inline/,
            use: [
              'babel-loader',
              'vue-svg-loader',
            ],
          },
          {
            loader: 'file-loader',
            query: {
              name: 'assets/[name].[hash:8].[ext]',
            },
          },
        ],
      })

[Aryan3212]

Does using vue-loader work for you instead of babel-loader?

[Aryan3212]

I've used some of the things mentioned in #62, and it worked for me greatly you can check them out.