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).
It is on my TODO list, probably will release tomorrow.
SVG2JSX – Convert SVG to Valid React SVG
21–30 of 30 posts
Re: SVG2JSX – Convert SVG to Valid React SVG
#22Related: Babel transform to load SVGs as React components: https://github.com/jhamlet/svg-react-loader
Upvoted, but it's actually a webpack loader not a babel transform.
Re: SVG2JSX – Convert SVG to Valid React SVG
#23I thought parens around any SVG would make it valid JSX.
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.
Re: SVG2JSX – Convert SVG to Valid React SVG
#24Re: SVG2JSX – Convert SVG to Valid React SVG
#25Is `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?
Re: SVG2JSX – Convert SVG to Valid React SVG
#26Re: SVG2JSX – Convert SVG to Valid React SVG
#27Is `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?
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.
Re: SVG2JSX – Convert SVG to Valid React SVG
#28Slight 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 = "" 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?
Re: SVG2JSX – Convert SVG to Valid React SVG
#29I'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.
hey lucideer, I think it's usefull when you had to work with SVG sprites + React. Converts the attributes not supported in React (xlink:href, fill-rule, etc.) to valid React attributes and also in case you have inline styles (eg. style="margin-left:20px") this tool will generate a Javascript object from that style ({marginLeft: 20}), which is valid React inline style. Also, I think it's super usefull in case you had…
I quickly tested it before commenting above and it stripped and discarded quite a lot of my SVG code (hence my comment on lossy transformations). I've just looked into React's SVG support and it is poor and hacky (e.g. it hardcodes two ns prefixes rather than supporting aliased uris as per the SVG spec.), so I guess my main objection should really be with React's (lack of) decent SVG support rather than with this tool.
That said though, I've used SVG in React quite a lot myself, but I've always opted for SVG as strings or external static resources rather than inlined vdom objects - this has worked fine for me as I would think of SVG as a display format so it has never needed granular access according to application state in my experience.
Re: SVG2JSX – Convert SVG to Valid React SVG
#30check out https://www.npmjs.com/package/react-icon-loader - converts svg to stateless component with svgo optimizations