search

publitas / react-svg-icons

33 stars 11 forks source link

Doesn't support svg with style elements #4

Open laramlewis opened 9 years ago

laramlewis commented 9 years ago

I am using react-svg-icons and started encountering the error below when I added SVG files that contain style elements:

E.g.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 12.6 7.8" style="enable-background:new 0 0 12.6 7.8;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#41d6c3;stroke-width:2;stroke-miterlimit:10;}
</style>
<polyline id="XMLID_70_" class="st0" points="11.9,7.1 6.2,1.4 0.7,6.9 "/>
</svg>

However, if I change the SVG to put the style in-line, the error goes away:

E.g.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 12.6 7.8" enable-background="new 0 0 12.6 7.8" xml:space="preserve">
<g>
  <polyline fill="none" stroke="#41d6c3" stroke-width="2" stroke-miterlimit="10" id="XMLID_70_" class="st0" points="11.9,7.1 6.2,1.4 0.7,6.9 "/>
</g>
</svg>

Error:

/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/lib/transformation/file/index.js:671
      throw err;
      ^

SyntaxError: unknown: Unexpected token (1:60)
> 1 | <svg {...params}viewBox="-12 11.3 6.1 10.7"><style>.st0{fill:#777677;}</style><path class="st0" d="M-11.3 22l-.7-.7 4.6-4.6L-12 12l.7-.7 5.4 5.4z"/></svg>
    |                                                             ^
    at Parser.pp.raise (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.expect (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:76:33)
    at Parser.pp.jsxParseExpressionContainer (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:301:8)
    at Parser.pp.jsxParseElementAt (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:370:30)
    at Parser.pp.jsxParseElementAt (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:362:30)
    at Parser.pp.jsxParseElement (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:398:15)
    at Parser.parseExprAtom (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:410:21)
    at Parser.pp.parseExprSubscripts (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
    at Parser.pp.parseMaybeUnary (/Users/lmlewis/git/platform-ui/platform-ui/node_modules/react-svg-icons/node_modules/svg-to-react/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)

These SVG files are coming from our design team and I assume are valid SVG, but I don't know enough about SVG to be certain. Is it possible to have react-svg-icons support SVG files like these that contain style elements?

felixhageloh commented 9 years ago

not sure this will be easy to support. The reason this doesn't work, is that the SVG gets parsed as JSX, which doesn't support style tags.

However, it would work if instead of having this:

<style>.st0{fill:#777677;}</style><path class="st0" d="M-11.3 22l-.7-.7 4.6-4.6L-12 12l.7-.7 5.4 5.4z"/>

You'd have this

<path fill='#777677' d="M-11.3 22l-.7-.7 4.6-4.6L-12 12l.7-.7 5.4 5.4z"/>

So essentially, instead of using style tags, use inline styles. Not sure this helps, i.e. I don't know whether your design team can easily produce svgs like this

laramlewis commented 9 years ago

Thank you for your reply. I will let our design team know.

burtyish commented 8 years ago

On a related note, once you move the styles inline, you need to remove the class attribute if you want to avoid this console warning: Warning: Unknown DOM property class. Did you mean className?

kylanhurt commented 1 year ago

I definitely ran into a similar issue when I used style instead of className. I think partially because I'm used to developing on React Native. Error message wasn't helpful at all.