SVGR wrongly escape IDs, URLs and xlink:href that containing CJK characters and Cyrillic characters

[tychenjiajun]

🐛 Bug Report

Input a file containing Chinese(or Korean, Japanese, Cyrillic) ID and mapping URLs, output incorrect component.

To Reproduce

Type in the following SVG in the playground. https://react-svgr.com/playground/?svgo=false

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="100%" y1="-0.000572193403%" x2="0%" y2="100.000572%" id="你好">
            <stop stop-color="#1CFBEA" offset="0%"></stop>
            <stop stop-color="#44A2FF" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M12,24 C5.373,24 0,18.627 0,12 C0,5.373 5.373,0 12,0 C18.627,0 24,5.373 24,12 C24,18.627 18.627,24 12,24 Z" id="路径" fill="#292D38" fill-rule="nonzero" opacity="0"></path>
        <path d="M9.499951,13.7499644 C9.70826433,13.5416492 10.046011,13.5416492 10.254326,13.7499643 C10.4626412,13.9582776 10.4626412,14.2960243 10.2543261,14.5043394 L10.2543261,14.5043394 L7.44401862,17.3146469 L9.345895,17.3146469 L9.345895,17.3146469 L9.43206642,17.3216 C9.68448712,17.3627719 9.87714485,17.5818346 9.87714483,17.8458966 C9.87714483,18.1392974 9.63929729,18.3771464 9.34589505,18.3771464 L9.34589505,18.3771464 L6.20620802,18.3771491 C6.17438105,18.3800152 6.14236083,18.3800152 6.11053385,18.3771492 C5.81714505,18.3507302 5.60072426,18.0914741 5.62714393,17.7980868 L5.62714393,17.7980868 L5.62714395,14.6583955 C5.62714395,14.3649947 5.8649915,14.1271457 6.15839374,14.1271457 C6.45179449,14.1271457 6.68964353,14.3649932 6.68964353,14.6583955 L6.68964353,14.6583955 L6.68964353,16.5602718 L9.499951,13.7499644 Z M13.7499718,13.7499618 C13.9582852,13.5416466 14.2960318,13.5416468 14.5043469,13.7499619 L14.5043469,13.7499619 L17.3146568,16.5602651 L17.3146568,14.6583887 C17.3146568,14.3649879 17.5525044,14.1271389 17.8459066,14.1271389 C18.1393074,14.1271389 18.3771564,14.3649864 18.3771564,14.6583887 L18.3771564,14.6583887 L18.3771564,17.7980798 C18.3800225,17.8299068 18.3800225,17.861927 18.3771564,17.893754 C18.3507375,18.187143 18.0914814,18.4035636 17.7980941,18.3771439 L17.7980941,18.3771439 L14.6584029,18.3771439 L14.6584029,18.3771439 L14.5722315,18.3701908 C14.3198108,18.3290188 14.1271531,18.1099561 14.1271531,17.8458941 C14.1271531,17.5524934 14.3650006,17.3146443 14.6584029,17.3146443 L14.6584029,17.3146443 L16.5602792,17.3146443 L13.7499718,14.5043368 L13.7499718,14.5043368 L13.6882487,14.4304603 C13.5442284,14.2225666 13.5648029,13.9351308 13.7499718,13.7499618 Z M17.8470837,5.62487049 L17.8960948,5.62713158 C18.1888354,5.65419797 18.4042046,5.91345408 18.3771365,6.20619392 L18.3771365,6.20619392 L18.3771365,9.34588499 L18.3771365,9.34588499 L18.3701833,9.43205641 C18.3290114,9.68447711 18.1099487,9.87713486 17.8458867,9.87713482 C17.5524859,9.87713482 17.3146368,9.63928728 17.3146369,9.34588503 L17.3146369,9.34588503 L17.3146369,7.44400871 L14.5043294,10.2543162 C14.2960161,10.4626313 13.9582694,10.4626313 13.7499544,10.2543162 C13.5416393,10.0460029 13.5416393,9.70825621 13.7499544,9.49994113 L13.7499544,9.49994113 L16.5602578,6.68963114 L14.6583814,6.68963114 C14.3649807,6.68963114 14.1271317,6.45178359 14.1271317,6.15838135 C14.1271317,5.8649806 14.3649792,5.62713157 14.6583814,5.62713156 L14.6583814,5.62713156 L17.7980726,5.62713156 C17.830677,5.6241168 17.8634904,5.6241168 17.8960948,5.62713158 L17.8470837,5.62487049 Z M6.11957519,5.62612171 L6.20619392,5.62713409 L9.34588507,5.62713409 C9.63928582,5.62713409 9.87713487,5.86498163 9.87713486,6.15838388 C9.87713486,6.45178463 9.63928732,6.68963368 9.34588507,6.68963367 L9.34588507,6.68963367 L7.44400871,6.68963367 L10.2543162,9.49994113 L10.2543162,9.49994113 L10.3160392,9.57381764 C10.4600595,9.78171135 10.4394851,10.0691472 10.2543162,10.2543162 C10.0460028,10.4626312 9.7082562,10.4626312 9.49994113,10.2543162 L9.49994113,10.2543162 L6.68963115,7.44401278 L6.68963115,9.34588916 C6.68963115,9.63928991 6.45178361,9.8771389 6.15838136,9.87713895 C5.86498061,9.87713895 5.62713162,9.63929141 5.62713158,9.34588916 L5.62713158,9.34588916 L5.62713158,6.20619793 C5.6241168,6.1735935 5.6241168,6.14078039 5.62713158,6.10817571 C5.65419797,5.81543537 5.91345408,5.60006596 6.20619392,5.62713409 L6.11957519,5.62612171 Z" id="形状结合" fill="url(#你好)" fill-rule="nonzero"></path>
    </g>
</svg>

In the output component, the IDs and URLs are wrongly escaped.

Expected behavior

If the ID should be escaped to id="\u8DEF\u5F84" , the fill should be url(#\\u8DEF\\u5F84). Or both the ID and the fill should not be escaoed.

Possible fix

See babel/babel#4909 (comment)

Add the option generatorOpts: { jsescOption: { minimal: true } } to

svgr/packages/plugin-jsx/src/index.ts

Line 56 in 846cd20

const result = transformFromAstSync(babelTree, code, {

may fix it.

[tychenjiajun]

Temporary solution, use the following config in your .svgrrc.js

module.exports = {
    jsx: {
        babelConfig: {
            generatorOpts: { jsescOption: { minimal: true } },
        },
    },
};

I believe that this should be the default option.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.