Planning: SVG system about batfish HOT 8 CLOSED

@tristen: I have never created or exported SVGs myself, so I'd love help figuring out and documenting this stuff.

from batfish.

Just documentation on what the SVG should look like (i.e exported with inline styles and as few paths as possible?). I've used it on SVGs exported from Inkscape and it didn't go well.

from batfish.

The only two rules that I think need to be enforced are:

• React only supports these SVG attributes: https://facebook.github.io/react/docs/dom-elements.html#all-supported-svg-attributes
• Inline styles only, no <style> element

Also important to note that height / width properties will be ignored by batfish. Maybe we should output a warning message in cases where this happens?

from batfish.

I'm thinking that this tool for converting SVGs to optimized React components should be an independent open-source project. We should see if a suitable one already exists (I assume I did this before and didn't find any?), and if not let's create and publish it. Seems to me pretty useful for React devs.

from batfish.

This seems similar: https://github.com/boopathi/react-svg-loader, but our system has some weird quirks wrt logo recoloring.

from batfish.

react-svg-loader looks great! I don't remember why I didn't use it before, and instead wrote some code "inspired" by it 🙄. We should try it again.

from batfish.

Ugh, I've looked through a confusing batch of open-source SVG-to-JSX things. All of them seem partially if not wholly abandoned? Very hard to judge. I've sent out a feeler to see how active react-svg-loader is. If it seems to be stalled, seems we'll want to write out own thing.

from batfish.

I made:

• https://github.com/mapbox/svg-react-transformer
• https://github.com/mapbox/svg-react-transformer-writer
• https://github.com/mapbox/svg-react-transformer-loader

I'm actually thinking maybe none of them should be included in Batfish proper — but should be suggested as recommendations, and included in the mapbox-batfish wrapper with more defaults.

from batfish.