Over a million developers have joined DZone.

I Made a Python Script That Converts SVG to React

Check out Swizec Teller's adventure making a Python script that converts SVG to React!

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

I made a terrible thing Sunday night.

The theme that I bought for the new React Indie Bundle page has decorations built with SVG. You slap them into the page as <svg> tags, and it makes your sections look nice.

Image title

You’re supposed to slap them into the page as <svg> tags. It’s great that create-react-app has built-in support for importing svgs, right?

Well… that’s meant for images. import arrow from 'decorations/arrow.svg gives you a relative URL. Something like public/decorations/arrow.svg that you’re meant to use as a src prop for an image tag.

import arrow from 'decorations/arrow.svg`

// ...
const Arrow = () => (
    <img src="{arrow}" />
);

This, of course, does not work with with the Angle theme. That one wants you to use SVG as a first-class citizen of the DOM. So what’s a guy to do?

Well… heh… I built a python script that takes SVG and crudely turns it into a React component. This is a terrible idea, but with a lot of manual massaging, it worked.

Here It Is:

import os

# from http://stackoverflow.com/questions/4303492/how-can-i-simplify-this-conversion-from-underscore-to-camelcase-in-python
def dash_to_camelcase(value):
    def camelcase():
        yield str.lower
        while True:
            yield str.capitalize

    c = camelcase()
    return "".join(c.next()(x) if x else '-' for x in value.split("-"))

for subdir, dirs, files in os.walk('./top'):
    for file in files:
        path = os.path.join(subdir, file)
        name, ext = file.split('.')

        with open(path, 'r') as f:
            svg = f.read()

            svg = svg.replace('<svg', 'import React from "react"; export const %s = () => (<svg' % dash_to_camelcase(name), 1) \
                     .replace('class=', 'className=') \
                     .replace('preserveaspectratio=', 'preserveAspectRatio=') \
                     .replace('viewbox=', 'viewBox=') \
                     .replace('stroke-width=', 'strokeWidth=') \
                     .replace('', ')')

            with open(os.path.join(subdir, name+'.js'), 'w') as out:
                out.write(svg)

The script traverses a directory and assumes all the files it finds are SVGs. This is the first red flag. Then it reads the SVG as text and performs some search & replace operations:

  • <svg becomes a React import, and an exported function declaration
  • class, preserveaspectratio, viewbox, and stroke-width are fixed to follow React’s prop naming rules
  • </svg> gets a ) to close the function body.

This is red flag number 2 through 6, maybe 7. Why? Because this is terrible, and I should feel bad. You can’t parse XML with Regex, which this is a simplified instance of, and for the love of god use a parser like lxml.

Several problems showed up:

  • Some files had two <svg> tags. I had to manually edit them every time I re-ran the script because bugs
  • Some files had typos in their props, like stroke-width = ". This is valid XML, but my “parser” couldn’t handle it manual edits
  • Files with two <svg>s have to be wrapped in a <div> to fulfill React’s “one child per component” policy. This needs manual edits because my “parser” knows nothing.

Two hours after I started, I was done. Happy to have successfully turned 30 svgs into React components, I could now use the two that I needed. Excellent.

Yak shaving at its finest.

This could make a useful Webpack plugin, though. Import SVG as a React component? That sounds like something everybody needs.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
components ,plugin ,svg ,react ,web dev

Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}