Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Transform SVG into React components

github.com

Post reply on HN
Print view View original

11–20 of 35 posts

Re: Transform SVG into React components

#11

Post by hex13 »

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.

besides - if you generate your SVG programmatically you can just return them in your render function:

function Foo(props) { return }

Re: Transform SVG into React components

#12

Post by tehno »

abritinthebay wrote: post #10
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).

Yeah, USE tag is pretty buggy across browsers.

Also, sometime you just need to inline SVG, for example if you want some icon path fill color to change on mouse-over. Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg.

Re: Transform SVG into React components

#14

Post by Klonoar »

photonios wrote: post #13

Doesn't `react-svg-loader`[0] do the same? [0] https://github.com/boopathi/react-svg-loader

I'd done this awhile ago with https://github.com/ryanmcgrath/react-iconpack (haven't touched it in literally forever, at least insofar as time is considered in the JavaScript world - probably doesn't work now), too. Never caught on for whatever reason, but was fun to hack together.

I do feel like (and I think another commenter somewhere in here noted this) that actually fully converting SVGs to JS has a lot of detriments in terms of ability to edit and such, so the loader approach is better.

Re: Transform SVG into React components

#15

Post by photonios »

Klonoar wrote: post #14
photonios wrote: post #13

Doesn't `react-svg-loader`[0] do the same? [0] https://github.com/boopathi/react-svg-loader

I'd done this awhile ago with https://github.com/ryanmcgrath/react-iconpack (haven't touched it in literally forever, at least insofar as time is considered in the JavaScript world - probably doesn't work now), too. Never caught on for whatever reason, but was fun to hack together. I do feel like (and I think another commenter somewhere in here noted this) that actually fully converting SVGs to JS has a lot of detrim…

Another approach which I use at work is to use `postcss-inline-svg`[0]. This allows you to "import' the SVG from your CSS and then customize it. For example, you might want the icon in a different color:

    background: svg-load('myicon.svg', fill=blue);
The SVG would then be inlined into the CSS instead of the HTML.

[0] https://github.com/TrySound/postcss-inline-svg

Re: Transform SVG into React components

#17

Post by TheCoreh »

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.

Re: Transform SVG into React components

#18

Post by abritinthebay »

tehno wrote: post #12
abritinthebay wrote: post #10

Earlier quoted context omitted.

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

Yeah, USE tag is pretty buggy across browsers. Also, sometime you just need to inline SVG, for example if you want some icon path fill color to change on mouse-over. Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg.

We actually had a nice system for that... but again: browser bugs :(

Until browsers collectively get off their asses with SVG (most of these bugs are years old in their big trackers) using React for SVGs is a good workaround.

Re: Transform SVG into React components

#19

Post by Already__Taken »

abritinthebay wrote: post #18
tehno wrote: post #12

Earlier quoted context omitted.

Yeah, USE tag is pretty buggy across browsers. Also, sometime you just need to inline SVG, for example if you want some icon path fill color to change on mouse-over. Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg.

We actually had a nice system for that... but again: browser bugs :( Until browsers collectively get off their asses with SVG (most of these bugs are years old in their big trackers) using React for SVGs is a good workaround.

They won't because it seems like they might as well forge ahead with CSS additions and drop an entirely separate renderer. That's what happened to the SVG Animations.

Of course it's not like svg will get removed so Why fight it...

Re: Transform SVG into React components

#20

Post by josteink »

tehno wrote: post #12
abritinthebay wrote: post #10

Earlier quoted context omitted.

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

Yeah, USE tag is pretty buggy across browsers. Also, sometime you just need to inline SVG, for example if you want some icon path fill color to change on mouse-over. Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg.

> Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg.

I can see that easily solved much better, cleanly and not to mention lightweight with some CSS rather simple pre-processors in the build process.

Or is your argument that you already have a (React-based) build-process and you'd want to align this with what you have, rather than creating something new and different along-side everything else (despite the result being suboptimal)?

Post reply on HN