search

airbnb / babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your React Components.
MIT License
474 stars 92 forks source link

Syntax error on comments in SVG (SVGO disabled) #89

Closed RomkeVdMeulen closed 3 years ago

RomkeVdMeulen commented 3 years ago

When I try to import an SVG that has a comment in it's body while svgo is disabled, I get this error:

SyntaxError: icon.svg: Unexpected token (1:63)

Re-enabling SVGO and having the comment removed fixes this, but ideally it should be possible to import the raw SVG code.

babel.config.js

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "inline-react-svg",
            {
                "svgo": false
            }
        ]
    ]
}
ljharb commented 3 years ago

Can you share the raw svg code, so i can reproduce?

RomkeVdMeulen commented 3 years ago 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z"/></svg>
ljharb commented 3 years ago

I'm able to reproduce this as described.

However, this seems like a Babel parsing issue - not something we can fix. Please file an issue on babel, and I'll close this one.