Reakit: SVG Tools

[codyaverett]

What if Reakit supported some SVG things?

The problem

I've been using SVG for a lot of things lately and some things are just more difficult than they need to be.
One example of a _not so great time_ is creating layouts in SVG's coordinate system. Someone would normally have do their own calculations or use a library such as D3 for helper functions.

Some more ideas.

• SVG Icons?
• Shapes
• SVG Layouts? SVGGrid or SVGFlex primatives
• Bounding box helpers/ containers

Layouts

https://www.npmjs.com/package/react-svg-flexbox
https://yogalayout.com/

Further motivations

Varun Vachhar — Creative Coding with React & SVG (VIDEO)
SVG can do that?! (Sarah Drasner) (VIDEO)
Dmitry Baranovskiy - You Don't Know SVG (VIDEO)

[Thomazella]

Hey @codyaverett. That's an interesting use case you're coming forward with.

[codyaverett]

Thanks @Thomazella. Does this sound crazy? Working with SVG sometimes drives me crazy, but you can do some crazy awesome things with some CSS styled SVG.

I think it would be cool to be able to use reakit to generate some custom shapes/icons or use any Sketch/Illustrator exported SVG asset our designer cooks up.

• Aria tags are supported by SVG and SVG has great support.

• One thing I've found to not have full support in the SVG spec is foreign objects, which allow you to render normal html elements inside of the SVG coordinate system.

• Rendering a canvas in SVG is possible but it also have limited support across browsers.

• Rendering SVG in SVG can emulate a sort-of relative positioning.

• Sprite-sheets can be created by using SVG's viewbox attribute.

Maybe these thoughts will bring up more ideas.
SVG!

I need some actual examples though.

[Thomazella]

Cool. If you can put something together to show us it'll be easier to reason about. To be honest I haven't used SVG that much 😅

[codyaverett]

What if there was a generic way to handle some of the standard icon libraries?

for example: Semantic-UI supports FontAwesome Icons
https://semantic-ui.com/elements/icon.html

[PlayMa256]

That would be a "wrapper" for an icon library, making possible to choose which one to use? (idk others, i just know FA too)

[diegohaz]

Closing due to inactivity.