In next.config.js - I added config which is needed for using SVG images.
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
module.exports = withCSS(
withSass(
{
webpack: (config) => config,
distDir: '../_next'
},
withImages({
webpack(config, options) {
return config;
}
})
)
);
And here is my SVG file, under next folders /client/assets/googleIcon.svg.
Maybe problem is in the SVG file. I don't have experience with SVG, is this SVG correct?
<svg version="1.1" width="100%" height="100%" viewBox="0 0 25 25">
<g fill="none" fillRule="evenodd">
<path
d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
fill="#4285F4"
/>
<path
d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
fill="#34A853"
/>
<path
d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
fill="#FBBC05"
/>
<path
d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
fill="#EA4335"
/>
</g>
</svg>
And on the end I am importing this file and tried to show image in the followign ways:
{googleIcon}<img src={googleIcon} />When I run the app I receive the following error:
./assets/googleIcon.svg 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
You will need to nest the withImages into withSass function. This is why these functions take config as argument.
If you need to provide each of these arguments, they can be combined into the most nested functions argument.
module.exports = withCSS(
withSass(
withImages({
distDir: '../_next',
webpack(config, options) {
return config;
}
})
)
);