damianstasik / vue-svg-loader

🔨 webpack loader that lets you use SVG files as Vue components
https://vue-svg-loader.js.org
MIT License
645 stars 86 forks source link

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

Open MisaoDev opened 1 year ago

MisaoDev commented 1 year ago

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 commented 1 year ago

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

Aryan3212 commented 1 year ago

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