Does not transform SVG (v3.0.2)

[JonnyBurger]

I ran the following script off the documentation:

optimize.mjs

import { transform } from "@svgr/core";

const svgCode = `
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="10" y="10" height="100" width="100"
    style="stroke:#ff0000; fill: #0000ff"/>
</svg>
`;

const jsCode = transform.sync(
  svgCode,
  { icon: true },
  { componentName: "MyComponent" }
);

console.log(jsCode);

And ran it with Node. The output was

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="10" y="10" height="100" width="100"
    style="stroke:#ff0000; fill: #0000ff"/>
</svg>

I expected the output to be in React syntax.

I used v3.0.2 of the package.

[AlpayC]

yea this happens also in next js, when i using the app router endpoint

[rossmoody]

@JonnyBurger I think the config may need the plugins: ['@svgr/plugin-jsx'] part to transform to JSX. Otherwise it only transforms the SVG.

[ggdaltoso]

I was running into the same issue and @rossmoody suggestion worked for me.
Thanks 🙇