Future improvements for @prenda/spark-icons

[WilliamKelley]

My priority in the initial rollout of @prenda/spark-icons was making it work. But there are several places we can make it great, with extra work.

• Automate the file download with Figma's API
  • I've done no research to see if it's even viable.
  • Currently, the download of the icon files has to be done manually. It's kind of tedious, but not too bad. BUILDER.md outlines the process.
• Upgrade SVGO and simplify builder.js
  • SVGO had to be installed at a version < 2 because of a breaking API change (full release history here). The new API is synchronous, which maybe means we can get rid of use of the custom scripts under modules/waterfall/*. (this wasn't true)
  • There's also opportunity here to just simplify builder.js in general. I don't know how much of it needs to be the way it is because of async or whatever, I just left alone whatever wasn't breaking. Generally, most of it was necessary
  • UP FOR REVIEW in chore(spark-icons): add icon file builder scripts #133
• Update scripts from Mui to mirror their next branch
  • There's various Issue / PR history you can take it upon yourself to find in Mui's GH repo about it, but they've done a lot to reduce file / bundle size. Consequently, the generated files now look exactly like the transpiled version that babel outputs on build: before off the master branch (v4), and after off the next branch. The difference is that they avoid import * as React from 'react'; which burdens the transpile output, and instead goes directly to ... require('react/jsx-runtime');. We can follow it, but i think the v4 way is clearer while we're still rolling out our initial implementation.
  • PARTIALLY COMPLETED: in "upgrade svgo and simplify builder.js"
• Add custom SVG's under custom/ like our logos, monograms, illustrations, etc.
  • Mui had this idea incorporated into their script originally and I stripped it out. We can easily add it back once we agree it's the direction we want to take.
  • UP FOR REVIEW in feat(spark-icons): add illustrations and logos #141

[WilliamKelley]

• Correct fill-rule="evenodd"
  • Most of the icons export with the above attribute. It is an essential attribute for many SVGs and defines how the browser should handle drawing / filling where paths intersect. However, it's an extra attribute that can be done away with, if the fill rule is changed to "nonzero" (which is the browser default). In Figma, you can do this manually with the Fill Rule Editor Plugin but it a manual, one-by-one process. SVGO hasn't implemented an automation of this process due to time/space complexity, see issue. Following talk of this around, in this issue, I found that this site/service Icomoon does the conversion as part of their upload process. If we automate upload and download, we could automate bulk conversion after download from Figma.

[WilliamKelley]

Found a random repo that fetches icons thru Figma's API like I described: https://github.com/SberBusiness/icons/tree/main/tools/fetcher.

Hope it's useful to a future implementer.