Escaped characters in <text> are rendered as their escape codes

🐛 Bug Report

I have the following SVG containing some text representing markup code, which includes characters like < and >. Those characters are (rightfully) escaped in the .svg file into < and > respectively:

<svg>
  <text
    x="0"
    y="16"
    font-size="16px"
    fill="#000000"
    text-anchor="start"
    direction="ltr"
  >
    &lt;h1&gt;...&lt;/h1&gt;
  </text>
</svg>

When adding this SVG tree directly to the DOM, as-is, it renders the expected <h1>...</h1> text.

However, when importing the SVG with svgr into a React component (in the context of a Next.js app, through next-svgr), the following React code is generated:

import * as React from "react"

function SvgComponent(props) {
  return (
    <svg {...props}>
      <text y={16} fontSize={16}>
        {"&lt;h1&gt;...&lt;/h1&gt;"}
      </text>
    </svg>
  )
}

export default SvgComponent

Because the escaped HTML-safe characters have been embedded into a string, they will render as escaped: <h1></h1>

To Reproduce

The example above was generated from the Playground, and can be copy-pasted for reproduction.

Expected behavior

Text containing escaped characters should render identically whether the SVG is included directly in the DOM or imported in a React tree through svgr.

Two options to solve this:

1. Un-escape inner HTML text before embedding it into a single string (output would be: {"<h1>...</h1>"})
2. Keep escaping, but break down into sections (output would be: <{"h1"}>{"..."}<{"/h1"}>)

Solution 1 seems more appropriate and less complex to implement. This could probably be done in a Babel plugin that visits <text> nodes and un-escapes their innerHTML.

System:

• OS: macOS Mojave 10.14.6
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 15.2.0 - /usr/local/bin/node
• Yarn: 1.22.5 - ~/.yarn/bin/yarn
• npm: 6.14.4 - ~/.npm-packages/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

[Droppers]

Hi @michaeljung, if you use Yarn this is a temporary solution. Add the following to package.json:

"resolutions": {
  "@svgr/hast-util-to-babel-ast": "https://github.com/Droppers/hast-util-to-babel-ast.git"
}

I had to build it myself since the repository does not have a built version.

[micheljung]

@Droppers if you have a direct dependency to svgr, you can replace the version number with: https://github.com/jsamr/svgr/archive/7798218e1bc4b68bd9c857210128c81e1e3aed18.zip

This points to the latest commit of @jsamr’s branch. It didn’t work for me because svgr is only a transitive dependency in my project, so I’d had to fork and release 2 projects in between or so. While I write this, I wonder if I could’ve just overriden the version, like it would work with Maven/Gradle 🤷‍♂️