SVG to JSX Converter

Convert SVG to JSX for React with automatic attribute transformations




Automatic Transformations
    

    
SVG Attributes

                    
  • stroke-width
                                
                                strokeWidth
  • stroke-linecap
                                
                                strokeLinecap
  • stroke-linejoin
                                
                                strokeLinejoin
  • fill-rule
                                
                                fillRule
  • clip-path
                                
                                clipPath
Color Attributes

                    
  • fill-opacity
                                
                                fillOpacity
  • stroke-opacity
                                
                                strokeOpacity
  • stop-color
                                
                                stopColor
  • stop-opacity
                                
                                stopOpacity
  • flood-color
                                
                                floodColor
Text Attributes

                    
  • font-family
                                
                                fontFamily
  • font-size
                                
                                fontSize
  • font-weight
                                
                                fontWeight
  • text-anchor
                                
                                textAnchor
  • text-decoration
                                
                                textDecoration
Xlink Namespace

                    
  • xlink:href
                                
                                xlinkHref
  • xmlns:xlink
                                
                                xmlnsXlink
  • xml:space
                                
                                xmlSpace
HTML Attributes

                    
  • class
                                
                                className
Style Attribute

                    
  • style="..."
                                
                                style={{...}}