SVG Converting
callogerasl opened this issue · 1 comments
callogerasl commented
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 commented
Done! Thanks @callogerasl