[RFC] Add react-native-svg about emission HOT 11 CLOSED

IMO, this doesn't pull its weight - shipping an entire SVG renderer for a single icon? We should just ship a really big icon and let it get resized correctly by the OS.

@alloy poked me that I should do a second evaluation because this was probably closer to what we want than I think, and he's right.

We've chatted before about what an SVG dependency would look like for us (IRL, so no link) - but a lot of our experience with SVG rendering in iOS apps comes from having a single, massive, comprehensively spec-compliant dependency for rendering an SVG. Which is how everyone does it in native only, but it looks like this is a small and well contained dependency. The native code is readable, and while it's not got tests - it is shipped with Expo by default and I trust that team.

I think this is probably the closest to being what we'd have built out had we done it ourselves, plus it's already 4 years old and has android support which is not what ours is like. So I'm a +1.

from emission.

Thanks for thorough evaluation everyone and reconsidering @orta 🙏🏾

Based on the feedback, we'll proceed. We actually have about a dozen SVGs for Local Discovery we'll be using this library for, including some of the ones in this screenshots below so it isn't just for one icon to be clear.

from emission.

Yes, I've had this discussion with @orta as well in the past but this use case is slightly different. We need to gradually scale the size our pin icon (max: 1.5x - min: 0.5x) as the user zooms in and out of the map.

I took a video to illustrate what needs to happen. Although it's not currently implemented that's the plan.

So this can't be solved with the standard iOS scales for images ("@3x", "@2x") etc...

from emission.

The goal of including SVGs (directly from Zeplin) is definitely a good idea; having one asset that's scalable to any screen is a big win over PNGs. I'd be okay with including an SVG-to-PNG converter in a build process or something, but if this dependency works and it meets our criteria, then it sounds fine to me.

from emission.

We already tried using PNGs instead and pins would look pixelated at higher zoom levels when changing the scale.

I’m not sure I understand this correctly. Is this another issue than the one solved by having various versions of an icon for different device screen scales (or asset bundles)?

from emission.

Last time I talked to @orta about this he seemed fairly strongly against it. A potential alternative here is to convert SVGs over to PNGs via a snapshotting tool. I've actually done this exact thing in the performance-monitor repository. I use the library repng to generate a snapshot of a react component. It's a solution I had to use for emails because they don't support SVGs.

from emission.

Seems like a great addition barring any gotchas.

from emission.

@damassi it's my mistake with initially naming the RFC wrong when I first opened it, this has no dependency or anything to do with react-native-web.

from emission.

Ah yeah, i just saw that and updated my comment :)

from emission.

@orta cool, I like the updated comment 👍

I wanted to add that SVG's are already a part of our web stack, and adding support for SVG's in Emission would help share more expertise across web and iOS codebases.

from emission.

Well, this'll make integrating palette icons easy breezy. Go team! 🎉

from emission.