Transform SVG into React components

#1

Post by BafS » Mon, Oct 30, 2017, 3:03 AM UTC

Transform SVG into React components
github.com

Re: Transform SVG into React components

#2

Post by peterchau » Mon, Oct 30, 2017, 4:57 AM UTC

Amazing.

Re: Transform SVG into React components

#3

Post by askmike » Mon, Oct 30, 2017, 5:17 AM UTC

This does exactly what I have been doing manually for at least ~15 times in the last week. If only I saw this a few weeks ago.. (It's easy / not lot of work, but why if we can automate?)

Re: Transform SVG into React components

#4

Post by debaserab2 » Mon, Oct 30, 2017, 5:35 AM UTC

Let's not forget, sometimes when you need some really basic functionality, you don't have to reach for a module that maybe does a lot more than what you need. For example, the last time I needed svg inlined into a web app I was working on, this is the quick component that I whipped up:

https://gist.github.com/ajbdev/8d15e302564fe04a7d383c1a54f8d...

Despite it's simplicity, it has yet to fail me.

Re: Transform SVG into React components

#5

Post by avitzurel » Mon, Oct 30, 2017, 5:46 AM UTC

peterchau wrote: post #2

Amazing.

HN is really aware of these type of comments. An account created 47 minutes ago. A single comment on this post.

Re: Transform SVG into React components

#6

Post by [deleted] » Mon, Oct 30, 2017, 5:47 AM UTC

[deleted]

Re: Transform SVG into React components

#7

Post by iamleppert » Mon, Oct 30, 2017, 6:25 AM UTC

This is doing little more than providing a wrapper around svgo, which is doing all the real work.

This is generally a poor use of SVG as well, if your use of SVG is for static assets, don't transform all your SVG into react, leave it as SVG where it can be easily manipulated and editing by the plethora of tools that can work directly with SVG, previewed in the browser, etc. If you need you can inline the SVG into your CSS via a base64 URI, etc.

Re: Transform SVG into React components

#8

Post by leeoniya » Mon, Oct 30, 2017, 6:28 AM UTC

"Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should."

Re: Transform SVG into React components

#9

Post by josteink » Mon, Oct 30, 2017, 6:34 AM UTC

If I can have only one question, it would no doubt be “why”?

Re: Transform SVG into React components

#10

Post by abritinthebay » Mon, Oct 30, 2017, 6:46 AM UTC

josteink wrote: post #9

If I can have only one question, it would no doubt be “why”?

We do this at my work - it allows easy programmatic inclusion.

We wouldn’t do it if browsers weren’t a buggy mess with the USE tag though (Chrome in particular is a dumpster fire of SVG bugs).