Transform SVG files into React components in seconds
In my spare time I’ve been building a mobile game, and I’ve defaulted to my environment of choice: React. Well, React Native in this case. Sure it’s not the first choice of most for game development, but for a stat heavy, state based game with no physics, I thought it might be fun.
For the graphics, I’ve decided to use SVG’s. I don’t have much experience with them, but their flexibility and unique, flat look could be cool. I’m not an artist, so I’m using SVG’s from Game Icons among other places.
After converting one SVG into a stateless functional component by hand, I immediately saw how labor intensive this task would be, especially considering that I’ll need to convert hundreds of these.
SVG to React CLI
Enter my new command line utility, svg-to-react-cli. This simple tool will process hundreds of svgs into basic stateless functional react components in seconds with props for height and width, and propTypes defined.
I’m sure I’m not the only one out there who could benefit from this tool, so now I’m sharing it with the world!
It’s simple to use, here’s the step by step rundown:
npm install -g svg-to-react-cli- Navigate to the directory that contains your
svg’s. - To process all the
svg’s in the file, runsvgtoreact dir - To process a single file, run
svgtoreact <svg file> <new component name>
Flags
Of course there are some flags that will modify your output.
rm-style — If you need to remove the style attributes from your svg.
no-format — If your svg is already indented properly.
There you have it. Hundreds, if not, thousands of files done in seconds. Take a look at it on Git Hub and NPM.
