Input requested: Generated SVG icon components

[lyzadanger]

Hallo! We've been talking some about re-implementing how our icon component(s) work. The current goal is standalone icon components (e.g. one component for each icon).

This PR demonstrates one auto-generating approach which seems to be working fine except for a casing conflict between React and preact for SVG element attribute names. React camel-cases them; preact does not. The generating utility I used here (SVGR) is popping out React components and so the attribute casing is currently problematic.

I'm looking for input here on:

• What do you think we should do about the casing issue?
• Other than the casing issue, is there anything about the generated components that seems problematic?

Casing-fix possibilities

• Use preact-compat. It works. But it's not what we want to do, and downstream projects would have to use preact-compat, too.
• Manipulate generated icons by hand (and use the ignore-existing option when generating icons so that these changes don't get overwritten). @robertknight has expressed a preference for a script-able approach, however.
• Write our own translation script for the casing, either as a babel plugin or...sky's probably the limit.
• Use a different tool. Nothing I spotted seemed as drop-in. We could use a tool like svgo to generate optimized SVG elements but we'd still have to wrap them into components somehow.
• Contribute to (or fork, which is less appetizing) the SVGR project to address the issue at its source. SVGR has a bunch of sub-packages; the relevant one here is hast-util-to-babel-ast which has a set of mappings for attributes.

Trying out this branch.

If you check out this branch and run make dev and visit http://localhost:4001/components-icons, you'll see something like:

This is mostly right but the line weights, etc., are wrong because of the casing issue.

Turning on preact-compat gives this result (which is correct):

[robertknight]

Relevant upstream issue is gregberge/svgr#450. This was closed by a bot due to inactivity, but the author said they would be open to a solution.

[lyzadanger]

@robertknight This is from some notes I took on a scratch branch:

Note to self during development: preact expects SVG element attributes to be kebab-cased, but SVGR's hast-util-to-babel-ast maps all SVG attribute names to camel-cased variants, which is what React expects — i.e. there is a preact incompatibility with the current hast-util-to-babel-ast utility in SVGR. I was able to intervene by hacking the getKey function to return t.jsxIdentifier(key) without doing any mapping or logic. I did this by installing @svgr/cli locally and then literally hand-manipulating the built index.js of hast-util-to-babel-ast in node_modules. Obviously this is not a solution. But I don't want to forget how I did it.

[lyzadanger]

Closing in lieu of #494