
SVG2JSX – Convert SVG to Valid React SVG - balajmarius
http://svg2jsx.herokuapp.com
======
brettlangdon
The site would be much better if it loaded a sample SVG by default so I don't
have to hunt down the source for an SVG that I have lying around (or on the
internet).

~~~
balajmarius
It is on my TODO list, probably will release tomorrow.

~~~
stuaxo
You could consider linking this up with open clip art.

------
mabbo
React is such a nice way to make SVGs generally. My team was building a
microservices to generate our dynamic images, then had the realization: our
frontend is React, and we can make these images client-side as inline SVGs (or
server side if we need using the same code).

There's some browser compatibility issues we have to stay on top of, but
overall it's been a blast.

~~~
Prefinem
I just started doing this for a project at work. It works amazingly well. I
ended building a react designer to handle loading and creating new elements so
that we can create images on the web versus converting an existing SVG from an
illistrator file.

------
bshimmin
For anyone who looked at the repository linked from the Heroku app and was
confused as to how this works (or indeed the extent of what it does), the
actual transformation is being done server-side, using this:
[https://github.com/balajmarius/svg-to-
jsx/blob/master/index....](https://github.com/balajmarius/svg-to-
jsx/blob/master/index.js) (from the same author).

------
namuol
Related: Babel transform to load SVGs as React components:
[https://github.com/jhamlet/svg-react-loader](https://github.com/jhamlet/svg-
react-loader)

~~~
paol
Upvoted, but it's actually a webpack loader not a babel transform.

------
lucideer
I'm curious: what's the main use-case for this functionality?

Particularly given it's a lossy transformation, I can't think of any situation
where I'd use this.

~~~
kennethkl
seems to just change double quotes to single. find and replace. I don't notice
any other difference.

oh, noticed `0.5` turn into `.5` and `black` turn into `#000`. not sure how
that will make it more JSX compatible

~~~
desdiv
>oh, noticed `0.5` turn into `.5` and `black` turn into `#000`. not sure how
that will make it more JSX compatible

That's for minimizing code size. In both of your examples one byte is shaved
off.

Arguably this is a case of premature optimization though. For production, the
Closure compiler will do a far better job at it. For development, you won't
notice the difference of shaving off a few kilobytes.

------
armandososa
I have not yet tried this OP's tool, but I've been using something similar
([http://svg-jsx.patmoody.com/](http://svg-jsx.patmoody.com/)) and I'm very
happy with the utility. Next time I need to inline SVG in react I will use
this one.

------
untog
Slight aside: what are the performance impacts here? I've been wondering for a
while whether JSX is a little dangerous in that it makes repeated, huge,
nested calls to React.createElement() look like plaintext.

For example, I could easily just run element.innerHTML = "<svg...>" to add SVG
content to my page. If the SVG isn't being dynamically updated, doesn't making
JSX like this incur a large and unnecessary overhead?

------
Rexxar
Does anyone know why the page try to load the url
"[https://localhost:9000/sockjs-
node/info?t=1493857220633"](https://localhost:9000/sockjs-
node/info?t=1493857220633") ?

~~~
awinograd
Probably some sort of live reload functionality for development

------
devrelm
Is `xmlns` actually required? We've pulled it out of all of our React svg's
and everything seems to work fine. Does anyone know of any quirks this could
be causing?

~~~
tomgp
It depends, if you're delivering stand alone SVGs (as opposed to inlined in
some html) then browsers may not render the graphic properly without it.

------
barbuza
check out [https://www.npmjs.com/package/react-icon-
loader](https://www.npmjs.com/package/react-icon-loader) \- converts svg to
stateless component with svgo optimizations

------
tonetheman
I thought parens around any SVG would make it valid JSX.

~~~
TheCoreh
You have to escape some portions, like CSS, (otherwise { and } will be
interpreted as JS expression interpolation) remove xml namespaces, `class`
also needs to be renamed to `className`, among other tweaks.

