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 🙇

[mryechkin]

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

Thank you! The docs aren't clear about this at all.

[lostpebble]

The docs are really bad about this. Literally zero indication that anything extra is needed, and doesn't use the plugin in any examples. Yet, the entire project is about converting raw SVGs to React Native SVGs, so its easy to assume this is what it does, instead of just outputting the exact same input.