↵

SVG to JSX - Convert SVG to React valid SVG(svg2jsx.herokuapp.com)

6 years ago from Raul Dronca, Designer

  • Alessandro Stigliani, 6 years ago

    What is the point to use this ? serious question

    2 points
    • Simon EvansSimon Evans, 6 years ago

      JSX doesn't support conventional tag naming.

      For example, you may have an SVG that contains:

      <path class='class-1' data-name='name-1' d='M-100'/>

      JSX wouldn't be able to parse this correctly.

      Instead, the correct JSX would be something like:

      <path className="class-1' dataName='name-1' d='M-100'/>

      (class becomes className and data-name becomes dataName)

      These are just simple examples, but in a large SVG this can be tedious.

      Great tool!

      2 points
    • Marius Balaj, 6 years ago

      Hey Alessandro,

      Besides the stuff Simon already explained it also converts the inline style to attributes or it converts to Javascript objects.

      Basically <svg style='fill:red;margin-left:20px;'.. will throw an error in React, but using this tool the output will be like this <svg fill='#f00' style={{marginLeft: 20}}.. which is valid JSX code.

      You will find this tool usefull mostly when working with SVG sprites in React.

      0 points