Transform SVG into React components • Hacker News Board

Re: Transform SVG into React components

#21

Post by rpastuszak » Mon, Oct 30, 2017, 11:55 AM UTC

TheCoreh wrote: post #17

iamleppert wrote: post #7

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 you…

Ideally this is applied as a webpack transform, so the asset is left as SVG, and only converted during the build process. Inlining the SVG as Base 64 in CSS is not that good, since it limits what you can do with it (basically setting it as a background). If you create an actual SVG tag within HTML (via React) you can then use CSS to style the strokes, fills, etc.

Base64-encoded SVGs have a terrible impact on performance on mobile, so I'd be careful with that. Saying that, the situation has improved in the past few years (mostly because of hardware, not browser optimisations afair)

Re: Transform SVG into React components

#22

Post by gjjones » Mon, Oct 30, 2017, 1:10 PM UTC

Super cool to see other people using this pattern! People here are bringing up great points about the implications of this pattern. Our motivation to use this pattern was when replacing grunticon generating multiple colors of our SVGs during a build step. The grunticon step added a 1min+ to the feedback loop on seeing CSS changes(could have fixed this directly, lots of missed details in this story).

This simple script allowed us to quickly move past the problem during a rewrite to React, and solve more correctly when that system was a priority. https://gitlab.com/gjjones/svg-to-react

Re: Transform SVG into React components

#23

Post by oelmekki » Mon, Oct 30, 2017, 1:56 PM UTC

iamleppert wrote: post #7

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 you…

I love adding my svg as react components, actually. It makes it easy to conditionally toggle parts of it, change text, manage colors, etc.

Of course, if you just want to use the svg doc as a static icon, then yes by all mean, a plain file will do. But given the (very small) size of a svg file, caching it as a single resource may not be that useful.

Re: Transform SVG into React components

#24

Post by [deleted] » Mon, Oct 30, 2017, 2:12 PM UTC

iamleppert wrote: post #7

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 you…

[deleted]

Re: Transform SVG into React components

#25

Post by andreasklinger » Mon, Oct 30, 2017, 2:12 PM UTC

oelmekki wrote: post #23

iamleppert wrote: post #7

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 you…

I love adding my svg as react components, actually. It makes it easy to conditionally toggle parts of it, change text, manage colors, etc. Of course, if you just want to use the svg doc as a static icon, then yes by all mean, a plain file will do. But given the (very small) size of a svg file, caching it as a single resource may not be that useful.

agree most people who do inline styles (or any form of "my styling is written in the react file") do this afair

we inline for the same reason

i hope someone writes a good precompiler that allows efficient using def/use for (non changed) static inlining http://www.svgbasics.com/defs.html

Re: Transform SVG into React components

#26

Post by kuschku » Mon, Oct 30, 2017, 2:30 PM UTC

bromuro wrote: post #16

josteink wrote: post #9

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

We use SVG as react components to change SVG attributes without the need to change the SVG source, e.g. the color of the icons etc

You know you can use CSS and JS for that?

Re: Transform SVG into React components

#27

Post by Sir_Cmpwn » Mon, Oct 30, 2017, 2:42 PM UTC

iamleppert wrote: post #7

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 you…

>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.

As valid as this seems on the surface, why can't transforming SVG into React be a build step where React is an intermediate artifact?

Re: Transform SVG into React components

#28

Post by stmw » Mon, Oct 30, 2017, 5:22 PM UTC

debaserab2 wrote: post #4

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.

Good reminder, simpler is better

Re: Transform SVG into React components

#29

Post by rmetzler » Mon, Oct 30, 2017, 5:24 PM UTC

kuschku wrote: post #26

bromuro wrote: post #16

Earlier quoted context omitted.

We use SVG as react components to change SVG attributes without the need to change the SVG source, e.g. the color of the icons etc

You know you can use CSS and JS for that?

How would I go to represent rectangles, circles, text and lines with CSS and JavaScript? With Canvas? Is React able to render to canvas?

Sometimes SVG is a good fit for the graphics needed.

Re: Transform SVG into React components

#30

Post by kuschku » Mon, Oct 30, 2017, 5:59 PM UTC

rmetzler wrote: post #29

kuschku wrote: post #26

Earlier quoted context omitted.

You know you can use CSS and JS for that?

How would I go to represent rectangles, circles, text and lines with CSS and JavaScript? With Canvas? Is React able to render to canvas? Sometimes SVG is a good fit for the graphics needed.

I meant styling the SVG — instead of replacing SVG with react (slow), use CSS to modify properties of the SVG DOM.

That is significantly faster.