SVG Converting

[callogerasl]

While build SVG from views, some proprieties are being placed as Style and it should be a propriety in the own component.

As example, this view file:

Message Svg
width 24
height 24
viewBox 0 0 24 24  
SvgGroup
transform translate(1.000000, 2.000000)
SvgPath
fill #FFFFFF
d M10,22.1V16H-1V-1h24v17h-5.6L10,22.1z M1,14h11v3.9l4.6-3.9H21V1H1V14z
SvgGroup
transform translate(6.000000, 5.000000)
SvgRect
width 12
height 2
x -1
y -1
fill #FFFFFF
SvgRect
width 10
height 2
x -1
y 4
fill #FFFFFF

It should be converted as follow:

 <svg
      data-test-id={props["data-test-id"] || "Message"}
      viewBox="0 0 24 24"
      className={Message_hf477k}
    >
      <g
        data-test-id="Message.SvgGroup"
        className={SvgGroup_h1rznkpd}
        transform="translate(1.000000, 2.000000)"
      >
        <path
          data-test-id="Message.SvgPath"
          fill="#FFFFFF"
          d="M10,22.1V16H-1V-1h24v17h-5.6L10,22.1z M1,14h11v3.9l4.6-3.9H21V1H1V14z"
        />
        <g
          data-test-id="Message.SvgGroup:1"
          className={SvgGroup_hkhw5rd}
          transform="translate(6.000000, 5.000000)"
        >
          <rect
            data-test-id="Message.SvgRect"
            x="-1"
            y="-1"
            fill="#FFFFFF"
            className={SvgRect_h1m914b6}
          />
          <rect
            data-test-id="Message.SvgRect:1"
            x="-1"
            y={4}
            fill="#FFFFFF"
            className={SvgRect_h8i4e60}
          />
        </g>
      </g>
      {props.children}
    </svg>

Note that the transform has to be out of the css class, it has to go directly into the component.

[dariocravero]

Done! Thanks @callogerasl