I recently obtained an SVG react component that was automatically converted from the SVGR playground page. I integrated it into my project and followed the installation instructions for @svgr/webpack and configured the setup as advised. However, upon loading the page, I encountered the following error:
./img/PlaneIcon
Module parse failed: Unexpected token (2:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const PlaneIcon = (props) => (
> <svg
| width={687.135}
| height={687.135}
Import trace for requested module:
./pages/world.js
I have searched for possible solutions, but most of them focus on loading .svg files (which appears to be addressed in the next.config.js file). I have not found any indication that inline SVG in JSX requires a webpack loader. However, I am relatively new to working with Next.js and React, so I might be misinterpreting things. Any assistance would be greatly appreciated.
SVG Component:
const PlaneIcon = (props) => (
<svg
width={687.135}
height={687.135}
viewBox="0 0 181.804 181.804"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
// SVG content here
</svg>
)
export default PlaneIcon
Page where I am attempting to use the SVG component:
import PlaneIcon from '../img/PlaneIcon'
export default function World() {
return(
<div>
<PlaneIcon c1="#f0dda8" c2="#fcba03" cg="#fff2cf" />
</div>
)
}
next.config.js:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
})
return config
},
}