Can generate React components with string style attribute

[twm]

If SVGO doesn't manage to remove all of the CSS in the style attribute, svgr will generate a React component with a string style prop, which is invalid. For example, when I run 0.4.0 against this Inkscape SVG this is what I get:

import React from "react";

const List = props => (
  <svg
    xmlnsXlink="http://www.w3.org/1999/xlink"
    width={48}
    height={48}
    {...props}
  >
    <g transform="translate(0 -1004.362)">
      <g id="a" color="#000" fill="#a3a3a3" strokeWidth={8}>
        <rect
          style="marker:none"
          width={4}
          height={4}
          x={4}
          y="1010.362"
          rx=".2"
          ry=".2"
          overflow="visible"
        />
        <rect
          ry=".2"
          rx=".2"
          y="1010.362"
          x={12}
          height={4}
          width={32}
          style="marker:none"
          overflow="visible"
        />
      </g>
      <use xlinkHref="#a" />
      <use xlinkHref="#a" transform="translate(0 8)" />
      <use xlinkHref="#a" transform="translate(0 16)" />
      <use xlinkHref="#a" transform="translate(0 24)" />
      <use xlinkHref="#a" transform="translate(0 32)" />
    </g>
  </svg>
);

export default List;

This component fails to render because of the style="marker:none" props.

[gregberge]

Thanks for reporting it! We should easily handle it by creating a h2x plugin.

[twm]

Hmm, maybe this is due to a specific svgo version? If I run the SVG through svgomg I get:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48">
  <g transform="translate(0 -1004.362)">
    <g id="a" color="#000" fill="#a3a3a3" stroke-width="8">
      <rect width="4" height="4" x="4" y="1010.362" rx=".2" ry=".2" overflow="visible"/>
      <rect ry=".2" rx=".2" y="1010.362" x="12" height="4" width="32" overflow="visible"/>
    </g>
    <use xlink:href="#a"/>
    <use xlink:href="#a" transform="translate(0 8)"/>
    <use xlink:href="#a" transform="translate(0 16)"/>
    <use xlink:href="#a" transform="translate(0 24)"/>
    <use xlink:href="#a" transform="translate(0 32)"/>
  </g>
</svg>

The relevant toggle is "Remove unknowns & defaults". svgomg seems to be using [email protected] while I have [email protected] locally.

I can't find any reference information for this marker CSS property on MDN, so maybe it's just garbage Inkscape inserted?

[twm]

It looks like https://github.com/svg/svgo/releases/tag/v0.6.4 changed behavior with respect to unknown CSS properties (which were previously translated into invalid element attributes, which were dropped).

[twm]

For anyone else stumbling across this, it looks like I can stop Inkscape from adding this invalid marker:none CSS property by checking some boxes in the preferences:

[gregberge]

Fixed in v0.5.0