search

rohanray / next-fonts

Import fonts in Next.js (supports woff, woff2, eot, ttf, otf & svg)
179 stars 12 forks source link

SVG font feature breaks next-optimized-images #6

Closed tizzle closed 5 years ago

tizzle commented 5 years ago

Hey,

i found that after updating next-fonts to anything >0.10 it breaks my SVG icon loading with next-optimized-images. All icons are processed before next-optimized-images can handle them, which leads to compile-time errors with the sprite loader:

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 (/xyz/node_modules/svg-sprite-loader/lib/loader.js:29:11)

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

It would be nice if we could have SVG font support in next-fonts as an opt-in.

Best regards and thanks for your work!

rohanray commented 5 years ago

@tizzle Thanks for reporting this! Will have a look soon

rohanray commented 5 years ago

@tizzle Pushed v 0.15.0

You can now (optionally) include SVG fonts by setting enableSvg option.

Example usage:

// next.config.js
const withFonts = require('next-fonts');
module.exports = withFonts({
  enableSvg: true,
  webpack(config, options) {
    return config;
  }
});

Let me know if this resolves your reported issue. Thanks!