I've gotten an SVG react component auto converted from the SVGR playground page, and put it in my project (as well as installing @svgr/webpack and setting up the config as directed) - when trying to load the page, the following error comes up:
./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've tried looking for solutions, but most things seem to be focused on how to load .svg files (which also seems to be what the next.config.js file is handling) - I've seen no indication that inline svg in jsx should even need a webpack loader, although I'm pretty new at working with next react so I might just be misunderstanding - any help would be really 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}
>
<defs>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="a"
x={-0.096}
y={-0.096}
width={1.191}
height={1.191}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="b"
x={-0.076}
y={-0.076}
width={1.152}
height={1.152}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="c"
x={-0.112}
y={-0.112}
width={1.225}
height={1.225}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
</defs>
<g transform="translate(-12.564 -34.15)">
<circle
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: props.c2,
strokeWidth: 1.07236,
strokeOpacity: 1,
filter: "url(#a)",
stopColor: "#000",
}}
cx={103.466}
cy={125.053}
r={65.504}
/>
<path
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: "none",
strokeWidth: 1.29171,
filter: "url(#b)",
stopColor: "#000",
}}
d="M103.466 46.15a78.902 78.902 0 0 0-78.902 78.903 78.902 78.902 0 0 0 78.902 78.902 78.902 78.902 0 0 0 78.902-78.902 78.902 78.902 0 0 0-78.902-78.902zm-.239 7.58a71.214 71.214 0 0 1 28.145 5.683c11.695 4.948 22.038 13.129 29.56 23.387 7.28 9.88 11.906 21.623 13.354 33.744.512 4.224.619 8.467.371 12.72a72.722 72.722 0 0 1-1.214 9.533 71.157 71.157 0 0 1-2.216 8.475 72.638 72.638 0 0 1-3.927 9.586 73.54 73.54 0 0 1-4.892 8.339 72.379 72.379 0 0 1-5.277 6.821 73.484 73.484 0 0 1-6.843 6.83c-2.226 1.913-4.544 3.726-6.99 5.351-2.787 1.894-5.725 3.56-8.749 5.044-2.887 1.378-5.854 2.592-8.898 3.581a71.154 71.154 0 0 1-8.496 2.215 72.37 72.37 0 0 1-9.513 1.206c-2.845.16-5.701.164-8.545-.015a72.136 72.136 0 0 1-9.455-1.215c-2.888-.586-5.753-1.315-8.547-2.255a71.089 71.089 0 0 1-9.574-3.948 72.68 72.68 0 0 1-8.266-4.863 71.765 71.765 0 0 1-6.812-5.285 72.684 72.684 0 0 1-6.772-6.791c-1.925-2.24-3.749-4.574-5.382-7.036-1.911-2.817-3.59-5.787-5.079-8.847a73.447 73.447 0 0 1-3.593-8.978 71.036 71.036 0 0 1-2.178-8.504c-.664-3.392-1.052-6.834-1.219-10.286-.129-3.17-.07-6.349.218-9.51a70.893 70.893 0 0 1 1.32-8.7 71.51 71.51 0 0 1 2.613-9.123 71.948 71.948 0 0 1 3.445-7.993c1.422-2.838 3.057-5.563 4.84-8.188 1.655-2.383 3.428-4.688 5.358-6.855 2.267-2.584 4.739-4.983 7.351-7.214 2.43-2.041 4.976-3.944 7.655-5.646a71.737 71.737 0 0 1 7.51-4.198 73.629 73.629 0 0 1 9.052-3.617c2.864-.912 5.782-1.673 8.74-2.21 3.142-.618 6.33-.945 9.523-1.15l3.382-.087z"
/>
<path
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: "none",
strokeWidth: 0.875042,
filter: "url(#c)",
stopColor: "#000",
}}
d="M103.466 71.602a53.45 53.45 0 0 0-53.45 53.45 53.45 53.45 0 0 0 53.45 53.452 53.45 53.45 0 0 0 53.45-53.451 53.45 53.45 0 0 0-53.45-53.45zm-.162 5.135a48.243 48.243 0 0 1 19.067 3.85c7.922 3.351 14.928 8.893 20.024 15.843a48.39 48.39 0 0 1 9.046 22.859c.347 2.861.42 5.735.252 8.617a48.202 48.202 0 0 1-2.324 12.199 49.208 49.208 0 0 1-2.66 6.493 49.818 49.818 0 0 1-3.314 5.65 49.033 49.033 0 0 1-3.575 4.62 49.783 49.783 0 0 1-4.635 4.627c-1.508 1.296-3.079 2.524-4.735 3.625a48.778 48.778 0 0 1-5.927 3.417 49.485 49.485 0 0 1-6.028 2.426 48.2 48.2 0 0 1-17.989 2.307c-2.15-.131-4.29-.409-6.404-.823a48.112 48.112 0 0 1-5.791-1.527 48.158 48.158 0 0 1-6.486-2.675 49.237 49.237 0 0 1-5.599-3.294 48.617 48.617 0 0 1-9.202-8.181c-1.304-1.517-2.54-3.098-3.646-4.766a48.178 48.178 0 0 1-3.44-5.994 49.756 49.756 0 0 1-2.435-6.081 48.122 48.122 0 0 1-1.476-5.761 48.443 48.443 0 0 1-.825-6.968c-.087-2.148-.048-4.301.147-6.442a48.443 48.443 0 0 1 2.664-12.074 48.74 48.74 0 0 1 2.335-5.415 48.75 48.75 0 0 1 3.279-5.547 48.818 48.818 0 0 1 3.629-4.644 48.575 48.575 0 0 1 4.98-4.887 48.618 48.618 0 0 1 5.185-3.825 48.597 48.597 0 0 1 5.087-2.843 49.878 49.878 0 0 1 6.133-2.45 47.566 47.566 0 0 1 5.921-1.498c2.128-.419 4.288-.64 6.451-.78l2.291-.058z"
/>
</g>
</svg>
)
export default PlaneIcon
Page I'm trying to use it on:
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
},
}
CodePudding user response：
This is painfully embarassing but I figure I'll share this just so that anyone as oblivious as me can find this - the component file just didn't have a .js file extension, hence why webpack didnt know what to do with it.