balajmarius / svg2jsx Goto Github PK

View Code? Open in Web Editor NEW

1.7K 11.0 60.0 1.59 MB

🍃 Transform SVG to valid JSX.

Home Page: https://svg2jsx.com/

License: MIT License

JavaScript 27.50% TypeScript 72.50%

next-js typescript svg-to-react vercel

svg2jsx's People

Contributors

Stargazers

Watchers

svg2jsx's Issues

Upgrade react-ace to v8.0.0

Make sure the editor theme looks the same.

Can't find isolate in react-native / expo

the word isolate should be 'isolate' with single or double quotes.

Add drag-and-drop feature for svg files

Quote css values

Some special CSS values are not quoted. Things like auto, none, normal.

They should be quoted.

width/height attributes removed after transforming to JSX

Suppose we have an SVG such as

 <svg width="61" height="52" viewBox="0 0 61 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <defs>
                                        <path d="M32 43.992c17.673 0 28.05 17.673 28.05 0S49.674 0 32 0C14.327 0 0 14.327 0 32c0 17.673 14.327 11.992 32 11.992z" id="bubble-1-a"/>
                                    </defs>
                                    <g fill="none" fill-rule="evenodd">
                                        <mask id="bubble-1-b" fill="#fff">
                                            <use xlink:href="#bubble-1-a"/>
                                        </mask>
                                        <use fill="#FF6D8B" xlink:href="#bubble-1-a"/>
                                        <path d="M2 43.992c17.673 0 28.05 17.673 28.05 0S19.674 0 2 0c-17.673 0-32 14.327-32 32 0 17.673 14.327 11.992 32 11.992z" fill="#FF4F73" mask="url(#bubble-1-b)"/>
                                        <path d="M74 30.992c17.673 0 28.05 17.673 28.05 0S91.674-13 74-13C56.327-13 42 1.327 42 19c0 17.673 14.327 11.992 32 11.992z" fill-opacity=".8" fill="#FFA3B5" mask="url(#bubble-1-b)"/>
                                    </g>
                                </svg>

width="61" height="52" will not be included in the JSX SVG. Is this is intentional? Previously it wasn't removing these attributes.

Quotes around jsx style value.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="600" height="600" x="0px" y="0px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600; background: #8FBAA1;">
</svg>

produces the output

<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 800 600'
style={{backgroundColor:#8fbaa1}}/>

there should be quotes in style attribute of svg
so the correct output should have style={{backgroundColor: '#8fbaa1'}}.

Don't change filter ids, or any values

Hey! Was really looking forward to using this tool since I've got a huge SVG that I'm making interactive, but it didn't work for me because the attribute values get changed.

What's the reasoning behind changing the values of attributes? I have mine all named because I swap around different effects. Having <use filter="url(#big-shadow)" /> get changed to <url filter="url(#j)" /> is annoying ot have to go put back, far worse than editing the JSX attribute names myself.

Why change any of the values at all? I expected the entire scope of this tool to change all html svg attributes to the JSX versions, I don't expect it to mess with the actual values of those attributes.

502 Error

Hi, it seems that #52 has come back. I'm getting 502's when I try to do a conversion.

Thanks!

Upgrade svg-parser to v2.0.2

Improper transform on self closing tags

Hello, thanks for the great utility!

I've noticed that self closing <linearGradient /> tags that are not nested in the original SVG become nested in the react valid SVG.

Here's an example:

original

<defs>
    <linearGradient id="linear-gradient" x1="293.33" y1="67.32" x2="81.07" y2="279.59" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#141414" stop-opacity="0"/>
        <stop offset="1" stop-color="#141414"/>
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="180.64" y1="340.02" x2="180.64" y2="248.55" xlink:href="#linear-gradient"/>
    <linearGradient id="linear-gradient-3" x1="168.65" y1="220.02" x2="168.65" y2="206.04" xlink:href="#linear-gradient"/>
</defs>

converted

 <defs>
        <lineargradient id='linear-gradient' x1='293.33' y1='67.32' x2='81.07'
        y2='279.59' gradientunits='userSpaceOnUse'>
            <stop offset='0' stopColor='#141414' stopOpacity='0' />
            <stop offset='1' stopColor='#141414' />
        </lineargradient>
        <lineargradient id='linear-gradient-2' x1='180.64' y1='340.02' x2='180.64'
        y2='248.55' xlinkHref='#linear-gradient'>
            <lineargradient id='linear-gradient-3' x1='168.65' y1='220.02' x2='168.65'
            y2='206.04' xlinkHref='#linear-gradient'>
            </lineargradient>
        </lineargradient>
    </defs>

Also, to echo #5 I'm also seeing the linearGradient tag being improperly transformed to all lowercase.

Can't convert svg below into jsx

Doesn't svg2jsx support <tspan/>?


<?xml version="1.0" encoding="UTF-8"?>
<svg width="977px" height="190px" viewBox="0 0 977 190" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Generator: Sketch 54 (76480) - https://sketchapp.com -->
  <title>ROAD-THROUGH</title>
  <desc>Created with Sketch.</desc>
  <g id="ROAD-THROUGH" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="bg" transform="translate(0.000000, -0.000000)">
      <rect id="border" stroke="#979797" x="0.5" y="0.5" width="976" height="189"></rect>
      <path d="M60,95.5 L917,95.5" id="Line" stroke="#01A65E" stroke-width="5" stroke-linecap="square" stroke-dasharray="10,10"></path>
    </g>
    <g id="title" transform="translate(15.000000, 25.000000)" font-family="PingFangSC-Regular, PingFang SC" font-weight="normal">
      <text id="title-time-up" font-size="11" fill="#04058E">
        <tspan x="0" y="12">时 间：</tspan>
      </text>
      <text id="title-time-down" font-size="11" fill="#8E0606">
        <tspan x="0" y="107">时 间：</tspan>
      </text>
      <text id="title-queue-up" font-size="12" fill="#04058E">
        <tspan x="0" y="43">队/长:</tspan>
      </text>
      <text id="title-queue-down" font-size="12" fill="#8E0606">
        <tspan x="0" y="138">队/长：</tspan>
      </text>
    </g>
    <g id="middle" transform="translate(46.000000, 84.000000)">
      <g id="crossWithNum">
        <g id="cross" stroke="#000000" stroke-linecap="square" stroke-width="1">
          <path d="M0,11.5 L22,11.5" id="Line-2"></path>
          <path d="M0.5,11.5 L22.5,11.5" id="Line-2-Copy" transform="translate(11.500000, 11.500000) rotate(90.000000) translate(-11.500000, -11.500000) "></path>
        </g>
        <text id="1" font-family="Helvetica" font-size="10" font-weight="normal" fill="#000000">
          <tspan x="19" y="27">1</tspan>
        </text>
      </g>
    </g>
    <g id="down" transform="translate(60.000000, 119.000000)" fill="#8E0606" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal">
      <text id="demo-time-down">
        <tspan x="0" y="13">time2</tspan>
      </text>
      <text id="demo-queue-down">
        <tspan x="0" y="44">queue2</tspan>
      </text>
    </g>
    <g id="up" transform="translate(57.000000, 25.000000)" fill="#04058E" font-family="PingFangSC-Regular, PingFang SC" font-weight="normal">
      <text id="demo-queue-up" font-size="12">
        <tspan x="2" y="43">queue1</tspan>
      </text>
      <text id="demo-time-up" font-size="11">
        <tspan x="0" y="12">time1</tspan>
      </text>
    </g>
  </g>
</svg>

Toggle JSX so I can only have SVG rather than a React component

I know the website is SVG2JSX but would love to have just the SVG spit out in JSX format without the whole React component.

I use Tailwind & have the habit to inline all the SVG if the component isn't too big. Would love a toggle button.

UI/UX

🔖 TODO

Buttons hover state
File drop state 🗳
Copy notification
Debounce editor

Domain Expired

Hey, i noticed the hosted app is down. any word on this ?

`clip-path` attribute should be converted to `clipPath`

It seems that #12 was not well-phrased. Indeed, we should convert clip-path to clipPath.

Reference in React docs: https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes

Removing ID

Hi, thanks for this tool! Just wondering, would it be possible for the JSX output to retain the id's of objects?

Reduce bundle size of transform package

I wanted to use this library inside one of my react project. However, the bundle size is not ideal. Check the current bundle size.

I can see that prettier is installed as a dependency rather than a devDependency. Shifting prettier to devDependency will reduce the size by 33%.

I am can submit a PR for this.

Thank you!

Just wanted to say this project is super helpful. Thank you!

SVG animation

Could someone provide the code to make such projects (https://codepen.io/aurer/pen/jEGbA) working great?

I would like to convert SVG that is animated.

Doesn't Convert the Text Node in the Input SVG

I was trying to convert the SVG To JSX and found one weird bug. This doesn't support the conversion of Text Node in SVG.

For E.g. below SVG Doesn't translate to JSX.
It just says [Object Object]

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"> <g fill="none" fill-rule="evenodd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)"> <circle cx="5.565217" cy="6.06087" r="25.565217"/> <path d="M9 10.495652L15.504348 17"/> <text id="Track-job-sheet-stat" font-family="sans-serif" font-size="18" font-weight="bold" fill="#000000"> <tspan x="44.5080652" y="59.286875">Track job sheet status</tspan> </text> </g> </svg>

Update the package on npm

It's using an old version of prettier, that is incompatible with yarn 2.
Right now I install svg2jsx like this:

yarn add "@balajmarius/svg2jsx@https://github.com/balajmarius/svg2jsx.git#head=master&workspace=@svg2jsx/transform"

The downside is that I am forced to use node 12.18, since that is hardcoded somewhere in the package.

Toggle to replace stroke hex values for currentColor

As a heavy user of line icon packs, I would love to have a toggle to replace any stroke hex values for currentColor.

My current workflow:

Copy icon as SVG from Figma
Paste on svg2jsx
Copy code and replace all hex values by currentColor

Hopefully more people with similar use case can also benefit from this feature. :)

Btw, thanks a lot for creating such an awesome tool!

Output formatting options

Specifically, making output that conforms to the AirBnB style guide would be good.

Also I'd like to be able to disable line breaks between attributes.

Thanks!

stared this repo #+1

Preserve id attribute

Hi,
When using this tools it does not preseve id attribute:

Example:

<g id="layer1" inkscape:label="Layer path24641" inkscape:groupmode="layer" transform="translate(-148.16 -14.656)">

is transformed into:

<g transform="translate(-148.16 -14.656)">

Should not be that difficult to fix it, right ?

Improper casing for gradients.

When converting an SVG from it's normal to React the casing for Gradient's break.

EX.

<linearGradient id="a">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="1" stop-color="#f15770"/>
    </linearGradient>

becomes


<lineargradient id="a">
      <stop offset="0" stopColor="#fff" />
      <stop offset="1" stopColor="#f15770" />
</lineargradient>

I love you

Thank you for making this.

Doesn't handle <style> properly

This input:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1,.cls-15{fill:#e8f4fa;}.cls-13,.cls-2{fill:#fff;}.cls-20,.cls-3{fill:none;}.cls-12,.cls-13,.cls-14,.cls-15,.cls-18,.cls-19,.cls-20,.cls-3,.cls-9{stroke:#45413c;stroke-linejoin:round;}.cls-12,.cls-13,.cls-14,.cls-3,.cls-9{stroke-linecap:round;}.cls-4{fill:#ffdf3d;}.cls-5{fill:#ffef9e;}.cls-12,.cls-6{fill:#ffb0ca;}.cls-7{fill:#fcd;}.cls-8{fill:#020202;opacity:0.15;}.cls-10,.cls-9{fill:#ffdcd1;}.cls-11{fill:#ffcebf;}.cls-14{fill:#656769;}.cls-16{fill:#adc4d9;}.cls-17,.cls-18{fill:#c0dceb;}.cls-19{fill:#f0f0f0;}</style></defs><title>customer-service-woman</title><g id="_Group_" data-name="&lt;Group&gt;"><path class="cls-1" d="M90.5,50A40,40,0,1,0,14.06,66.5H86.94A39.85,39.85,0,0,0,90.5,50Z"/><path class="cls-2" d="M14.06,66.5a40,40,0,0,0,72.88,0Z"/><line class="cls-3" x1="11" y1="66.5" x2="89" y2="66.5"/><line class="cls-3" x1="6.5" y1="66.5" x2="9" y2="66.5"/><line class="cls-3" x1="91" y1="66.5" x2="93.5" y2="66.5"/></g><path class="cls-4" d="M63.9,44.9a6,6,0,0,0,6-6v-12a12,12,0,0,0-12.8-12A12.26,12.26,0,0,0,45.9,27.31V38.9a6,6,0,0,0,6,6Z"/><path class="cls-5" d="M57.1,14.93A12.26,12.26,0,0,0,45.9,27.31v3A12.26,12.26,0,0,1,57.1,17.93a12,12,0,0,1,12.8,12v-3A12,12,0,0,0,57.1,14.93Z"/><path class="cls-3" d="M63.9,44.9a6,6,0,0,0,6-6v-12a12,12,0,0,0-12.8-12A12.26,12.26,0,0,0,45.9,27.31V38.9a6,6,0,0,0,6,6Z"/><path class="cls-6" d="M57.9,43.1A15.6,15.6,0,0,0,42.3,58.7v4.2c0,7.91-2.81,9-5.92,9H33.9v5.4h2.48c4.36,0,11.92-3.63,11.92-10.8H67.5c0,4.56-3.36,5.4-5.92,5.4H59.1v5.4h2.48c4.92,0,11.92-1,11.92-10.8V58.7A15.59,15.59,0,0,0,57.9,43.1Z"/><path class="cls-7" d="M57.9,43.1A15.59,15.59,0,0,0,42.3,58.7v4.2a15.6,15.6,0,0,1,31.2,0V58.7A15.59,15.59,0,0,0,57.9,43.1Z"/><path class="cls-3" d="M57.9,43.1A15.6,15.6,0,0,0,42.3,58.7v4.2c0,7.91-2.81,9-5.92,9H33.9v5.4h2.48c4.36,0,11.92-3.63,11.92-10.8H67.5c0,4.56-3.36,5.4-5.92,5.4H59.1v5.4h2.48c4.92,0,11.92-1,11.92-10.8V58.7A15.59,15.59,0,0,0,57.9,43.1Z"/><line class="cls-3" x1="48.3" y1="59.3" x2="48.3" y2="66.5"/><line class="cls-3" x1="67.5" y1="59.3" x2="67.5" y2="66.5"/><ellipse class="cls-8" cx="42.94" cy="78" rx="18" ry="1.5"/><path class="cls-9" d="M59.1,76.7H57.3a2.4,2.4,0,1,1,0-4.8h1.8Z"/><path class="cls-9" d="M33.9,76.7H32.1a2.4,2.4,0,1,1,0-4.8h1.8Z"/><line class="cls-3" x1="57.9" y1="50.9" x2="57.9" y2="66.5"/><polygon class="cls-10" points="61.5 43.7 57.9 50.9 54.3 43.7 54.3 40.7 61.5 40.7 61.5 43.7"/><path class="cls-11" d="M54.3,43.57l.27.13a9.54,9.54,0,0,0,6.66,0l.27-.13V40.7H54.3Z"/><polygon class="cls-3" points="61.5 43.7 57.9 50.9 54.3 43.7 54.3 40.7 61.5 40.7 61.5 43.7"/><path class="cls-12" d="M52.28,49.23a1,1,0,0,0,.81.39,1,1,0,0,0,.79-.42l1.8-2.5a1,1,0,0,0,0-1.19l-1.48-2a15.6,15.6,0,0,0-4.71,2Z"/><path class="cls-12" d="M63.52,49.23a1,1,0,0,1-1.6,0l-1.79-2.5a1,1,0,0,1,0-1.19l1.48-2a15.65,15.65,0,0,1,4.72,2Z"/><path class="cls-9" d="M68.1,29.9V27.5c0-.28,0-.56,0-.83a10.78,10.78,0,0,1-13.62-2.42A6.1,6.1,0,0,1,48.9,28.7a5.32,5.32,0,0,1-1.2-.14V29.9a1.81,1.81,0,0,0-1.8,1.8v.6a1.81,1.81,0,0,0,1.8,1.8l.17,0a10.19,10.19,0,0,0,20.07,0l.16,0a1.8,1.8,0,0,0,1.8-1.8v-.6A1.8,1.8,0,0,0,68.1,29.9Z"/><path class="cls-11" d="M53.1,34.1a1.2,1.2,0,1,1-1.2-1.2A1.2,1.2,0,0,1,53.1,34.1Z"/><path class="cls-11" d="M65.1,34.1a1.2,1.2,0,1,1-1.2-1.2A1.2,1.2,0,0,1,65.1,34.1Z"/><path class="cls-3" d="M54.9,36.5a4.35,4.35,0,0,0,6,0"/><path class="cls-3" d="M63.3,31.1a1.63,1.63,0,0,0-3,0"/><path class="cls-3" d="M55.5,30.9a1.63,1.63,0,0,0-3,0"/><path class="cls-3" d="M43.5,34.1v1.8a5.4,5.4,0,0,0,5.4,5.4h3"/><path class="cls-13" d="M44.7,29.3h2.4a0,0,0,0,1,0,0v6a0,0,0,0,1,0,0H44.7a1.2,1.2,0,0,1-1.2-1.2V30.5A1.2,1.2,0,0,1,44.7,29.3Z"/><path class="cls-14" d="M45.9,34.1a1.2,1.2,0,1,0,2.4,0V30.5a1.2,1.2,0,1,0-2.4,0Z"/><path class="cls-13" d="M69.9,29.3h2.4a0,0,0,0,1,0,0v6a0,0,0,0,1,0,0H69.9a1.2,1.2,0,0,1-1.2-1.2V30.5A1.2,1.2,0,0,1,69.9,29.3Z" transform="translate(141 64.6) rotate(180)"/><path class="cls-14" d="M69.9,34.1a1.2,1.2,0,1,1-2.4,0V30.5a1.2,1.2,0,0,1,2.4,0Z"/><path class="cls-14" d="M55.5,41.3a1.8,1.8,0,1,1-1.8-1.8A1.81,1.81,0,0,1,55.5,41.3Z"/><path class="cls-3" d="M43.5,32.3V26.9a14.4,14.4,0,0,1,28.8,0v5.4"/><path class="cls-15" d="M46.63,75h2.23L44.09,60.19a1,1,0,0,0-1-.69H41.63Z"/><path class="cls-16" d="M27.13,75h19.5l-5-15.5H23.5a1,1,0,0,0-.95,1.31Z"/><path class="cls-17" d="M41.63,59.5H23.5a1,1,0,0,0-.95,1.31l.6,1.86h19.5Z"/><path class="cls-18" d="M27.13,75h20.5v2.5H29.13a2,2,0,0,1-2-2Z"/><path class="cls-15" d="M47.63,75h9a.5.5,0,0,1,.5.5,2,2,0,0,1-2,2H47.63Z"/><path class="cls-19" d="M35.47,66.7a1.14,1.14,0,0,1,.53-.94,1.13,1.13,0,0,0-.9-.48c-.38,0-.75.22-.94.22s-.49-.22-.81-.21a1.2,1.2,0,0,0-1,.61,2.58,2.58,0,0,0,.31,2.48c.21.3.46.63.78.62s.43-.2.8-.2.49.2.81.19.55-.3.76-.6a3.23,3.23,0,0,0,.34-.7A1.06,1.06,0,0,1,35.47,66.7Z"/><line class="cls-3" x1="34.63" y1="64" x2="35.08" y2="63.55"/><path class="cls-20" d="M27.13,75h19.5l-5-15.5H23.5a1,1,0,0,0-.95,1.31Z"/></svg>

Produces this output:

<svg id='Layer_1' dataName='Layer 1' xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 100 100'>
    <defs>
        <g id='_Group_' dataName='&lt;Group&gt;'>
            <path className='cls-1' d='M90.5,50A40,40,0,1,0,14.06,66.5H86.94A39.85,39.85,0,0,0,90.5,50Z'
            />
            <path className='cls-2' d='M14.06,66.5a40,40,0,0,0,72.88,0Z' />
            <line className='cls-3' x1='11' y1='66.5' x2='89' y2='66.5' />
            <line className='cls-3' x1='6.5' y1='66.5' x2='9' y2='66.5' />
            <line className='cls-3' x1='91' y1='66.5' x2='93.5' y2='66.5' />
        </g>
        <path className='cls-4' d='M63.9,44.9a6,6,0,0,0,6-6v-12a12,12,0,0,0-12.8-12A12.26,12.26,0,0,0,45.9,27.31V38.9a6,6,0,0,0,6,6Z'
        />
        <path className='cls-5' d='M57.1,14.93A12.26,12.26,0,0,0,45.9,27.31v3A12.26,12.26,0,0,1,57.1,17.93a12,12,0,0,1,12.8,12v-3A12,12,0,0,0,57.1,14.93Z'
        />
        <path className='cls-3' d='M63.9,44.9a6,6,0,0,0,6-6v-12a12,12,0,0,0-12.8-12A12.26,12.26,0,0,0,45.9,27.31V38.9a6,6,0,0,0,6,6Z'
        />
        <path className='cls-6' d='M57.9,43.1A15.6,15.6,0,0,0,42.3,58.7v4.2c0,7.91-2.81,9-5.92,9H33.9v5.4h2.48c4.36,0,11.92-3.63,11.92-10.8H67.5c0,4.56-3.36,5.4-5.92,5.4H59.1v5.4h2.48c4.92,0,11.92-1,11.92-10.8V58.7A15.59,15.59,0,0,0,57.9,43.1Z'
        />
        <path className='cls-7' d='M57.9,43.1A15.59,15.59,0,0,0,42.3,58.7v4.2a15.6,15.6,0,0,1,31.2,0V58.7A15.59,15.59,0,0,0,57.9,43.1Z'
        />
        <path className='cls-3' d='M57.9,43.1A15.6,15.6,0,0,0,42.3,58.7v4.2c0,7.91-2.81,9-5.92,9H33.9v5.4h2.48c4.36,0,11.92-3.63,11.92-10.8H67.5c0,4.56-3.36,5.4-5.92,5.4H59.1v5.4h2.48c4.92,0,11.92-1,11.92-10.8V58.7A15.59,15.59,0,0,0,57.9,43.1Z'
        />
        <line className='cls-3' x1='48.3' y1='59.3' x2='48.3' y2='66.5' />
        <line className='cls-3' x1='67.5' y1='59.3' x2='67.5' y2='66.5' />
        <ellipse className='cls-8' cx='42.94' cy='78' rx='18' ry='1.5' />
        <path className='cls-9' d='M59.1,76.7H57.3a2.4,2.4,0,1,1,0-4.8h1.8Z' />
        <path className='cls-9' d='M33.9,76.7H32.1a2.4,2.4,0,1,1,0-4.8h1.8Z' />
        <line className='cls-3' x1='57.9' y1='50.9' x2='57.9' y2='66.5' />
        <polygon className='cls-10' points='61.5 43.7 57.9 50.9 54.3 43.7 54.3 40.7 61.5 40.7 61.5 43.7'
        />
        <path className='cls-11' d='M54.3,43.57l.27.13a9.54,9.54,0,0,0,6.66,0l.27-.13V40.7H54.3Z'
        />
        <polygon className='cls-3' points='61.5 43.7 57.9 50.9 54.3 43.7 54.3 40.7 61.5 40.7 61.5 43.7'
        />
        <path className='cls-12' d='M52.28,49.23a1,1,0,0,0,.81.39,1,1,0,0,0,.79-.42l1.8-2.5a1,1,0,0,0,0-1.19l-1.48-2a15.6,15.6,0,0,0-4.71,2Z'
        />
        <path className='cls-12' d='M63.52,49.23a1,1,0,0,1-1.6,0l-1.79-2.5a1,1,0,0,1,0-1.19l1.48-2a15.65,15.65,0,0,1,4.72,2Z'
        />
        <path className='cls-9' d='M68.1,29.9V27.5c0-.28,0-.56,0-.83a10.78,10.78,0,0,1-13.62-2.42A6.1,6.1,0,0,1,48.9,28.7a5.32,5.32,0,0,1-1.2-.14V29.9a1.81,1.81,0,0,0-1.8,1.8v.6a1.81,1.81,0,0,0,1.8,1.8l.17,0a10.19,10.19,0,0,0,20.07,0l.16,0a1.8,1.8,0,0,0,1.8-1.8v-.6A1.8,1.8,0,0,0,68.1,29.9Z'
        />
        <path className='cls-11' d='M53.1,34.1a1.2,1.2,0,1,1-1.2-1.2A1.2,1.2,0,0,1,53.1,34.1Z'
        />
        <path className='cls-11' d='M65.1,34.1a1.2,1.2,0,1,1-1.2-1.2A1.2,1.2,0,0,1,65.1,34.1Z'
        />
        <path className='cls-3' d='M54.9,36.5a4.35,4.35,0,0,0,6,0' />
        <path className='cls-3' d='M63.3,31.1a1.63,1.63,0,0,0-3,0' />
        <path className='cls-3' d='M55.5,30.9a1.63,1.63,0,0,0-3,0' />
        <path className='cls-3' d='M43.5,34.1v1.8a5.4,5.4,0,0,0,5.4,5.4h3' />
        <path className='cls-13' d='M44.7,29.3h2.4a0,0,0,0,1,0,0v6a0,0,0,0,1,0,0H44.7a1.2,1.2,0,0,1-1.2-1.2V30.5A1.2,1.2,0,0,1,44.7,29.3Z'
        />
        <path className='cls-14' d='M45.9,34.1a1.2,1.2,0,1,0,2.4,0V30.5a1.2,1.2,0,1,0-2.4,0Z'
        />
        <path className='cls-13' d='M69.9,29.3h2.4a0,0,0,0,1,0,0v6a0,0,0,0,1,0,0H69.9a1.2,1.2,0,0,1-1.2-1.2V30.5A1.2,1.2,0,0,1,69.9,29.3Z'
        transform='rotate(180 70.5 32.3)' />
        <path className='cls-14' d='M69.9,34.1a1.2,1.2,0,1,1-2.4,0V30.5a1.2,1.2,0,0,1,2.4,0Z'
        />
        <path className='cls-14' d='M55.5,41.3a1.8,1.8,0,1,1-1.8-1.8A1.81,1.81,0,0,1,55.5,41.3Z'
        />
        <path className='cls-3' d='M43.5,32.3V26.9a14.4,14.4,0,0,1,28.8,0v5.4'
        />
        <path className='cls-15' d='M46.63,75h2.23L44.09,60.19a1,1,0,0,0-1-.69H41.63Z'
        />
        <path className='cls-16' d='M27.13,75h19.5l-5-15.5H23.5a1,1,0,0,0-.95,1.31Z'
        />
        <path className='cls-17' d='M41.63,59.5H23.5a1,1,0,0,0-.95,1.31l.6,1.86h19.5Z'
        />
        <path className='cls-18' d='M27.13,75h20.5v2.5H29.13a2,2,0,0,1-2-2Z' />
        <path className='cls-15' d='M47.63,75h9a.5.5,0,0,1,.5.5,2,2,0,0,1-2,2H47.63Z'
        />
        <path className='cls-19' d='M35.47,66.7a1.14,1.14,0,0,1,.53-.94,1.13,1.13,0,0,0-.9-.48c-.38,0-.75.22-.94.22s-.49-.22-.81-.21a1.2,1.2,0,0,0-1,.61,2.58,2.58,0,0,0,.31,2.48c.21.3.46.63.78.62s.43-.2.8-.2.49.2.81.19.55-.3.76-.6a3.23,3.23,0,0,0,.34-.7A1.06,1.06,0,0,1,35.47,66.7Z'
        />
        <line className='cls-3' x1='34.63' y1='64' x2='35.08' y2='63.55' />
        <path className='cls-20' d='M27.13,75h19.5l-5-15.5H23.5a1,1,0,0,0-.95,1.31Z'
        />
    </defs>
</svg>

Two issues:

<style> is stripped away.
Instead of only wrapping style>, <defs> now wraps the entire SVG contents.

My solution:

<svg
    width={width}
    height={height}
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
  >
    <defs>
      <style>{`.cls-1,.cls-15{fill:#e8f4fa;}.cls-13,.cls-2{fill:#fff;}.cls-20,.cls-3{fill:none;}.cls-12,.cls-13,.cls-14,.cls-15,.cls-18,.cls-19,.cls-20,.cls-3,.cls-9{stroke:#45413c;stroke-linejoin:round;}.cls-12,.cls-13,.cls-14,.cls-3,.cls-9{stroke-linecap:round;}.cls-4{fill:#ffdf3d;}.cls-5{fill:#ffef9e;}.cls-12,.cls-6{fill:#ffb0ca;}.cls-7{fill:#fcd;}.cls-8{fill:#020202;opacity:0.15;}.cls-10,.cls-9{fill:#ffdcd1;}.cls-11{fill:#ffcebf;}.cls-14{fill:#656769;}.cls-16{fill:#adc4d9;}.cls-17,.cls-18{fill:#c0dceb;}.cls-19{fill:#f0f0f0;}`}</style>
    </defs>
     
      <g id="_Group_">
        <path
          className="cls-1"
          d="M90.5,50A40,40,0,1,0,14.06,66.5H86.94A39.85,39.85,0,0,0,90.5,50Z"
        />
        <path className="cls-2" d="M14.06,66.5a40,40,0,0,0,72.88,0Z" />
        <line className="cls-3" x1="11" y1="66.5" x2="89" y2="66.5" />
        <line className="cls-3" x1="6.5" y1="66.5" x2="9" y2="66.5" />
        <line className="cls-3" x1="91" y1="66.5" x2="93.5" y2="66.5" />
      </g>
      <path
        className="cls-4"
        d="M63.9,44.9a6,6,0,0,0,6-6v-12a12,12,0,0,0-12.8-12A12.26,12.26,0,0,0,45.9,27.31V38.9a6,6,0,0,0,6,6Z"
      />
      <path
        className="cls-5"
        d="M57.1,14.93A12.26,12.26,0,0,0,45.9,27.31v3A12.26,12.26,0,0,1,57.1,17.93a12,12,0,0,1,12.8,12v-3A12,12,0,0,0,57.1,14.93Z"
      />
      <path
        className="cls-3"
        d="M63.9,44.9a6,6,0,0,0,6-6v-12a12,12,0,0,0-12.8-12A12.26,12.26,0,0,0,45.9,27.31V38.9a6,6,0,0,0,6,6Z"
      />
      <path
        className="cls-6"
        d="M57.9,43.1A15.6,15.6,0,0,0,42.3,58.7v4.2c0,7.91-2.81,9-5.92,9H33.9v5.4h2.48c4.36,0,11.92-3.63,11.92-10.8H67.5c0,4.56-3.36,5.4-5.92,5.4H59.1v5.4h2.48c4.92,0,11.92-1,11.92-10.8V58.7A15.59,15.59,0,0,0,57.9,43.1Z"
      />
      <path
        className="cls-7"
        d="M57.9,43.1A15.59,15.59,0,0,0,42.3,58.7v4.2a15.6,15.6,0,0,1,31.2,0V58.7A15.59,15.59,0,0,0,57.9,43.1Z"
      />
      <path
        className="cls-3"
        d="M57.9,43.1A15.6,15.6,0,0,0,42.3,58.7v4.2c0,7.91-2.81,9-5.92,9H33.9v5.4h2.48c4.36,0,11.92-3.63,11.92-10.8H67.5c0,4.56-3.36,5.4-5.92,5.4H59.1v5.4h2.48c4.92,0,11.92-1,11.92-10.8V58.7A15.59,15.59,0,0,0,57.9,43.1Z"
      />
      <line className="cls-3" x1="48.3" y1="59.3" x2="48.3" y2="66.5" />
      <line className="cls-3" x1="67.5" y1="59.3" x2="67.5" y2="66.5" />
      <ellipse className="cls-8" cx="42.94" cy="78" rx="18" ry="1.5" />
      <path className="cls-9" d="M59.1,76.7H57.3a2.4,2.4,0,1,1,0-4.8h1.8Z" />
      <path className="cls-9" d="M33.9,76.7H32.1a2.4,2.4,0,1,1,0-4.8h1.8Z" />
      <line className="cls-3" x1="57.9" y1="50.9" x2="57.9" y2="66.5" />
      <polygon
        className="cls-10"
        points="61.5 43.7 57.9 50.9 54.3 43.7 54.3 40.7 61.5 40.7 61.5 43.7"
      />
      <path
        className="cls-11"
        d="M54.3,43.57l.27.13a9.54,9.54,0,0,0,6.66,0l.27-.13V40.7H54.3Z"
      />
      <polygon
        className="cls-3"
        points="61.5 43.7 57.9 50.9 54.3 43.7 54.3 40.7 61.5 40.7 61.5 43.7"
      />
      <path
        className="cls-12"
        d="M52.28,49.23a1,1,0,0,0,.81.39,1,1,0,0,0,.79-.42l1.8-2.5a1,1,0,0,0,0-1.19l-1.48-2a15.6,15.6,0,0,0-4.71,2Z"
      />
      <path
        className="cls-12"
        d="M63.52,49.23a1,1,0,0,1-1.6,0l-1.79-2.5a1,1,0,0,1,0-1.19l1.48-2a15.65,15.65,0,0,1,4.72,2Z"
      />
      <path
        className="cls-9"
        d="M68.1,29.9V27.5c0-.28,0-.56,0-.83a10.78,10.78,0,0,1-13.62-2.42A6.1,6.1,0,0,1,48.9,28.7a5.32,5.32,0,0,1-1.2-.14V29.9a1.81,1.81,0,0,0-1.8,1.8v.6a1.81,1.81,0,0,0,1.8,1.8l.17,0a10.19,10.19,0,0,0,20.07,0l.16,0a1.8,1.8,0,0,0,1.8-1.8v-.6A1.8,1.8,0,0,0,68.1,29.9Z"
      />
      <path
        className="cls-11"
        d="M53.1,34.1a1.2,1.2,0,1,1-1.2-1.2A1.2,1.2,0,0,1,53.1,34.1Z"
      />
      <path
        className="cls-11"
        d="M65.1,34.1a1.2,1.2,0,1,1-1.2-1.2A1.2,1.2,0,0,1,65.1,34.1Z"
      />
      <path className="cls-3" d="M54.9,36.5a4.35,4.35,0,0,0,6,0" />
      <path className="cls-3" d="M63.3,31.1a1.63,1.63,0,0,0-3,0" />
      <path className="cls-3" d="M55.5,30.9a1.63,1.63,0,0,0-3,0" />
      <path className="cls-3" d="M43.5,34.1v1.8a5.4,5.4,0,0,0,5.4,5.4h3" />
      <path
        className="cls-13"
        d="M44.7,29.3h2.4a0,0,0,0,1,0,0v6a0,0,0,0,1,0,0H44.7a1.2,1.2,0,0,1-1.2-1.2V30.5A1.2,1.2,0,0,1,44.7,29.3Z"
      />
      <path
        className="cls-14"
        d="M45.9,34.1a1.2,1.2,0,1,0,2.4,0V30.5a1.2,1.2,0,1,0-2.4,0Z"
      />
      <path
        className="cls-13"
        d="M69.9,29.3h2.4a0,0,0,0,1,0,0v6a0,0,0,0,1,0,0H69.9a1.2,1.2,0,0,1-1.2-1.2V30.5A1.2,1.2,0,0,1,69.9,29.3Z"
        transform="rotate(180 70.5 32.3)"
      />
      <path
        className="cls-14"
        d="M69.9,34.1a1.2,1.2,0,1,1-2.4,0V30.5a1.2,1.2,0,0,1,2.4,0Z"
      />
      <path
        className="cls-14"
        d="M55.5,41.3a1.8,1.8,0,1,1-1.8-1.8A1.81,1.81,0,0,1,55.5,41.3Z"
      />
      <path className="cls-3" d="M43.5,32.3V26.9a14.4,14.4,0,0,1,28.8,0v5.4" />
      <path
        className="cls-15"
        d="M46.63,75h2.23L44.09,60.19a1,1,0,0,0-1-.69H41.63Z"
      />
      <path
        className="cls-16"
        d="M27.13,75h19.5l-5-15.5H23.5a1,1,0,0,0-.95,1.31Z"
      />
      <path
        className="cls-17"
        d="M41.63,59.5H23.5a1,1,0,0,0-.95,1.31l.6,1.86h19.5Z"
      />
      <path className="cls-18" d="M27.13,75h20.5v2.5H29.13a2,2,0,0,1-2-2Z" />
      <path
        className="cls-15"
        d="M47.63,75h9a.5.5,0,0,1,.5.5,2,2,0,0,1-2,2H47.63Z"
      />
      <path
        className="cls-19"
        d="M35.47,66.7a1.14,1.14,0,0,1,.53-.94,1.13,1.13,0,0,0-.9-.48c-.38,0-.75.22-.94.22s-.49-.22-.81-.21a1.2,1.2,0,0,0-1,.61,2.58,2.58,0,0,0,.31,2.48c.21.3.46.63.78.62s.43-.2.8-.2.49.2.81.19.55-.3.76-.6a3.23,3.23,0,0,0,.34-.7A1.06,1.06,0,0,1,35.47,66.7Z"
      />
      <line className="cls-3" x1="34.63" y1="64" x2="35.08" y2="63.55" />
      <path
        className="cls-20"
        d="M27.13,75h19.5l-5-15.5H23.5a1,1,0,0,0-.95,1.31Z"
      />
  </svg>

Does it not make sense to use memo and PureComponent

This is really helpful with a project im working on lately. Thanks for it. Im just wondering doesn't it make sense to wrap functional components with memo and extend class components from PureComponent? That what I have been manually doing with the output. I could work on a PR if everyone agrees to this.

[Question] Upload/download multiple icons

Is there a simple way I can drag and drop a ton of icons?

Thanks!

502 from serverless function

I'm currently unable to use svg2jsx.com, looks like there's a 502 when trying to hit https://svg2jsx.com/api/transform

502: BAD_GATEWAY
Code: NO_STATUS_CODE_FROM_FUNCTION
ID: sfo1:4qs6j-1570823636643-7fbae05fd36e"

Zeit error docs for this error

Add support for react-native-svg

First off, nice tool!

Converting SVG for use in react native is something that tends to take a lot more time than doing it for web, so support for this would be very useful.

Maybe including SVGO would help during the transform.

clip-path attr converts incorrect

Your tool converts clip-path attr to camel-cased, clipPath, which is incorrect (if we believe create-react-app 2.0). Correct will be to leave clip-path.

But I must say, that it happens only in projects, created by create-react-app 2.0, so I was wondering, why?

<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 45 45'>
    <defs>
        <rect id='SVGID_1_134234rwer23' width='45' height='45' />
    </defs>
    <clipPath id='SVGID_2_134rwd'>
        <use href='#SVGID_1_134234rwer23' overflow='visible' />
    </clipPath>
    <path clipPath='url(#SVGID_2_134rwd)' d='M43,24c1.1-1.5,2.3-3,

Doesn't take into account `className`

The UX is incredible but it doesn't take into account className

For example,

<svg
	className="w-4 h-4 fill-current text-red-500"
	stroke-linecap="round"
	stroke-linejoin="round"
	stroke-width="2"
	stroke="currentColor"
	viewBox="0 0 24 24"
>
	<path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>

gets converted to

import React from "react";

function Icon() {
  return (
    <svg
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      viewBox="0 0 24 24"
    >
      <path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
    </svg>
  );
}

export default Icon;

Notice, the missing className property

Request for Capitalised Tags compatible with react-native-svg

Hi,

This looks great and works well. It could be used for React Native and react-native-svg but would need the tags to be capitalised, like below. Is this something which could be added?

... ...

Add an option to remove line breaks

For us humans we do not have to do this manually

Command line version

Would love to have a command line version of this tool.

why did you change it?

Before I was able to use this with no problems. Just bring my SVG, no matter how complex, and it would always convert to JSX. Why did you change it?

Ability to perform new conversion while preserving settings

Hi, recently I wanted to convert ~15 svgs to jsx and had to refresh the page every time to upload a new file. This also reset my settings (memo, single quotes). We can add a button to perform a new conversion while preseving the settings? Please let me know if I can work on this.

Custom Properties/CSS Variables not parsed properly

I'm dealing with SVG code that has CSS custom properties declared inline, like so:

<g style="--count: 8;">

Which gets converted to:

<g style={{ Count: "8" }} >

Instead of:

<g style={{"--count": 8}}>

Super useful tool by the way, I use it for every React project!

Missing loading indicator leads to user mistakes

I dragged a big file into the editor and the output appeared on the output panel (as expected) after a few secs. Then I repeated the process with some more files, but since there was no loading indicator, there was a time I copied the result from the previous file.

I'd suggest adding some visual cues indicating the second filed dragged is being processed or maybe even cleaning the output panel immediately when a new file is uploaded.

BTW, excellent job!

balajmarius / svg2jsx Goto Github PK

svg2jsx's People

Contributors

Stargazers

Watchers

Forkers

svg2jsx's Issues

🔖 TODO

Recommend Projects

Recommend Topics

Recommend Org