SVG to JSX Converter

Convert SVG attributes to React-compatible JSX.

Ad
SVG Input
Changes made:
    SVG Preview
    Ad

    Frequently Asked Questions

    Which SVG attributes get converted to camelCase? +
    All hyphenated SVG attributes are converted: stroke-width becomes strokeWidth, fill-rule becomes fillRule, clip-path becomes clipPath, font-size becomes fontSize, and so on. The xmlns attribute is removed since React handles it automatically.
    What does the component wrapper option do? +
    When enabled, the output wraps your SVG in a React functional component that accepts props. The component spreads props onto the SVG element, so you can pass className, style, onClick, and other attributes when using it.
    Does this handle CSS classes inside SVG? +
    Yes. The class attribute on SVG elements is converted to className, just like in HTML-to-JSX conversion. Inline style strings are also converted to JSX style objects.
    Ad