css styles error

[ccorcos]

I get a syntax error when there are styles in the svg files... :/

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" x="0px" y="0px"
     viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#B2B2B2;}
</style>
<g>
    <g>
        <path class="st0" d="M14.5,18v2h21v-2H14.5z M14.5,26h21v-2h-21V26z M14.5,32h21v-2h-21V32z"/>
    </g>
</g>
</svg>

[jhamlet]

Interesting...

Let me take a look and I'll see what I can do.

;-j

[jhamlet]

At first pass this looks like it might be an issue with Babel interpreting the curly ({}) braces and blowing up when it encounters that colon...

     SyntaxError: unknown: Unexpected token (23:18)
    21 |             <svg {...this.props}>
    22 |                   <style type="text/css">
  > 23 |     .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#B2B2B2;}
       |                   ^
    24 | </style>
    25 |   <g>
    26 |     <g>

[jhamlet]

Looks like its a known thing with JSX, but I don't think it really is an issue. Babel/JSX is doing what it is supposed to do.

Looks like I'll have to add a special case for style tags and their contents.

[jhamlet]

This should be working now with svg-react-loader@0.2.0

[ccorcos]

sweet!