Problem with SVG sprite in 2.0

[tizzle]

When importing my SVG as sprites like this:

import React from 'react';
import MyIcon from './icons/my-icon.svg?sprite';

export default () => (
  <div>
    my page..
    <MyIcon />
  </div>
);

i run into the following error:

 ERROR  Failed to compile with 1 errors                                                                     17:01:33

 error  in ./assets/icons/search.svg?sprite

Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
InvalidSvg: svg-sprite-loader exception.

module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjMgKDY3Mjk3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uLXNlYXJjaDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJpY29uLXNlYXJjaCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTE1LjMxMzQ2MTUsMTQuNDQzMTUzOCBDMTYuMjIyOTIzMSwxMy4zMzk5MjMxIDE2Ljc2OTIzMDgsMTEuOTI2MDc2OSAxNi43NjkyMzA4LDEwLjM4NDYxNTQgQzE2Ljc2OTIzMDgsNi44NTg1IDEzLjkxMDczMDgsNCAxMC4zODQ2MTU0LDQgQzYuODU4NSw0IDQsNi44NTg1IDQsMTAuMzg0NjE1NCBDNCwxMy45MTA3MzA4IDYuODU4NSwxNi43NjkyMzA4IDEwLjM4NDYxNTQsMTYuNzY5MjMwOCBDMTEuOTI2MDc2OSwxNi43NjkyMzA4IDEzLjMzOTg4NDYsMTYuMjIyOTIzMSAxNC40NDMxNTM4LDE1LjMxMzQ2MTUgTDE5LjEwMzMwNzcsMTkuOTczNjE1NCBMMTkuOTczNjE1NCwxOS4xMDMzNDYyIEwxNS4zMTM0NjE1LDE0LjQ0MzE1MzggWiBNNS4yMzA3NjkyMywxMC4zODQ2MTU0IEM1LjIzMDc2OTIzLDkuMDA3OTYxNTQgNS43NjY4NDYxNSw3LjcxMzczMDc3IDYuNzQwMzA3NjksNi43NDAzMDc2OSBDNy43MTM3MzA3Nyw1Ljc2Njg4NDYyIDkuMDA3OTYxNTQsNS4yMzA3NjkyMyAxMC4zODQ2MTU0LDUuMjMwNzY5MjMgQzExLjc2MTI2OTIsNS4yMzA3NjkyMyAxMy4wNTU1LDUuNzY2ODg0NjIgMTQuMDI4OTIzMSw2Ljc0MDMwNzY5IEMxNS4wMDIzNDYyLDcuNzEzNzMwNzcgMTUuNTM4NDYxNSw5LjAwNzk2MTU0IDE1LjUzODQ2MTUsMTAuMzg0NjE1NCBDMTUuNTM4NDYxNSwxMS43NjEyNjkyIDE1LjAwMjM0NjIsMTMuMDU1NSAxNC4wMjg5MjMxLDE0LjAyODkyMzEgQzEzLjA1NTUsMTUuMDAyMzg0NiAxMS43NjEyNjkyLDE1LjUzODQ2MTUgMTAuMzg0NjE1NCwxNS41Mzg0NjE1IEM5LjAwNzk2MTU0LDE1LjUzODQ2MTUgNy43MTM3MzA3NywxNS4wMDIzODQ2IDYuNzQwMzA3NjksMTQuMDI4OTIzMSBDNS43NjY4NDYxNSwxMy4wNTU1IDUuMjMwNzY5MjMsMTEuNzYxMjY5MiA1LjIzMDc2OTIzLDEwLjM4NDYxNTQgWiIgaWQ9IkltcG9ydGVkLUxheWVycyIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4="
    at Object.loader (/Users/tillhinrichs/Documents/_DEVELOPER/HTML/CleanCleanShop/cc-next2/node_modules/svg-sprite-loader/lib/loader.js:29:11)

 @ ./components/header/searchBox/index.js 5:0-58 6:24-27
 @ ./components/header/index.js
 @ ./pages/_app.js
 @ multi ./pages/_app.js

The source of this error is the (rather smallish) SVG being converted to Base64 before handed over to svg-sprite-loader. I think it would help to always turn of BASE64 conversion for elements having the ?sprite suffix. Is that possible?

[cyrilwanner]

Hi @tizzle
It should already be the case, that SVG elements don't get base64 encoded when used as a sprite.
I just tried your image (just decoded the base64 string) and also other smaller SVG elements in an empty project with the default config and I didn't get this error.
Do you overwrite a default config or maybe have other plugins or loaders which could handle SVG images?
If you don't have something confidential in your next.config.js, it would maybe help if you can post it here. Thank you!

[tizzle]

Hey @cyrilwanner,

after some investigation i found i was a bit trigger-happy with this bug report. It turns out that i updated next-optimized-images and next-fonts as well. As it turned out next-fonts added the possibility to use SVG fonts now, which breaks next-optimized-images. I will file an issue over at next-fonts.

Feel free to close.

Thanks for your fast reply and the great plugin!

Edit: Issue at next-fonts: rohanray/next-fonts#6

[cyrilwanner]

That's good to know, thank you for creating the issue in next-fonts! It looks like they already added an option to disable SVG fonts.

I'll close this issue for now, but feel free to open a new one when you are experiencing another problem.