SVGs are base64 inlined in the generated JS bundle

[stefanjudis]

Heyooo. 👋🏻 Thanks so much for this package. I just implemented it and it worked great! 👍🏻🎉

I noticed a tiny thing. I ran bundle analyzer on my nuxt site and discovered that the icons are inlined in the generated JavaScript files.

To be sure I removed the module again which made the inlined assets disappear.

This is e.g. code that is generated:

/***/ "./assets/icons/stopwatch.svg":
/*!************************************!*\
  !*** ./assets/icons/stopwatch.svg ***!
  \************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMUQ3Q0JCIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTgxLjAzMSAzOC4zMDVsNi01LjIzNC01LjA4Ni01LjgzMi02LjAwOCA1LjIzOGEzOS4xNDMgMzkuMTQzIDAgMCAxIDUuMDk0IDUuODI4em0tMjcuNjY4LTEyLjIzVjE4LjExaDcuNzM4VjYuNTAxSDM3Ljg4NnYxMS42MWg3LjczOXY3Ljk2NGMtMTcuNDEgMS45MjYtMzAuOTU3IDE2LjY3Ni0zMC45NTcgMzQuNTk4IDAgMTkuMjM0IDE1LjU5NCAzNC44MjQgMzQuODI0IDM0LjgyNCAxOS4yMzQuMDA0IDM0LjgyOC0xNS41OSAzNC44MjgtMzQuODIgMC0xNy45MjYtMTMuNTQzLTMyLjY3Mi0zMC45NTctMzQuNjAyem0tMy44NzEgNjEuNjg4Yy0xNC45NjEgMC0yNy4wODYtMTIuMTI1LTI3LjA4Ni0yNy4wODYgMC0xNC45NjEgMTIuMTI1LTI3LjA4NiAyNy4wODYtMjcuMDg2IDE0Ljk2IDAgMjcuMDg2IDEyLjEyNSAyNy4wODYgMjcuMDg2LjAwNCAxNC45NjEtMTIuMTI1IDI3LjA4Ni0yNy4wODYgMjcuMDg2em0zLjg3MS00Ni40MzhoLTcuNzM4djIzLjIxOWgxOS4zNDh2LTcuNzM4aC0xMS42MXoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="

Is this expected behavior? I'm assuming this is the result of some webpack default settings?

I'm not using these inlined files and would like to save the 20kb. ( not a big deal but hey ;) )

Keep up the good work and thanks a bunch!

I'm also happy to look into it myself. 😊

[farnabaz]

Hi
I'm so glad you find module helpful
It seems that issue is related to url-loader behavior. As docs says:

url-loader return a DataURL if the file is smaller than a byte limit.

And default byte limit in Nuxt.js is 1000, So any SVG files smaller than 1000 byte will show up in js bundle as base64 URIs.

We'll fix this in our next release, Until then this useless data can be removed by modifying module rules directly in nuxt.config.js and change byte limit of SVG files.

build: {
    extend(config) {
      const urlLoader = config.module.rules.find(rule => String(rule.test).includes('svg'));
      urlLoader.test = /\.(png|jpe?g|gif)$/;
      config.module.rules.push({
          test: /\.svg$/,
          use: [
              {
                  loader: 'url-loader',
                  options: {
                      limit: 12,
                  },
              },
          ],
      })
    }
  }

[stefanjudis]

Thanks for the swift reply! Looking forward to the next release.

The snippet does the trick! 🎉