chore(spark-icons): add icon file builder scripts

[WilliamKelley]

2 of 4

Part of #73. Reviewable by commit.

1. Project generation (chore(nx): generate new project, spark-icons (@prenda/spark-icons) #132)
2. Copying of icon utility scripts from Mui & Modification for our use case (this PR)
3. Removal of icons from @prenda/spark & Specific generation and replacement of depended-on icons (feat(spark)!: remove all Icons #134)
4. Addition of all icons in @prenda/spark-icons (feat(spark-icons): add all icons #135)

In this step

The first commit copies everything, the second commit makes most of the changes. The rest are polishes / improvements.

Script copying

With future knowledge, I've copied all the files from Mui that we'll need to modify, and installed only the packages we'll need later on -- the files might reference things I haven't installed, that's okay, it's meant to be in a broken state the next PR can highlight the changes clearly.

I've given permalink attribution for everything (except templateSvgIcon.tsx, that needs to be unchanged because it's literally used as a template). Mui is open-source under the MIT-license, so this is permissible. I didn't copy the download script that would make the process completed automated because our icons come from Figma and aren't hosted on the web by anyone. But, Figma does have an API that we could leverage in the future to prevent manual intervention in future maintenance (see #131 for such improvements)

Script modifying

As outlined in BUILDER.md, the manual export process should end with a directory libs/spark-icons/svg-files with three sub directories line/, filled/, duotone/.

default/renameFilter.js is one of the first steps in generation. The file name becomes PascalCased.js with snake_case.svg and Whatever - YouCallThis 2.svg formats being transformed. I could only find one instance of an icon name starting with a number, which is renamed to its word equivalent -- variable names can't be numbers. The sub directory of svg-files/ that each file belongs to is also matched and added as a suffix to the filename (note, Line becomes the default).

• svg-files/line/Activity.svg -> src/Activity.js
• svg-files/filled/Activity.svg -> src/ActivityFilled.js
• svg-files/duotone/Activity.svg -> src/ActivityDuotone.js

Notable changes in builder.js are 1) stripping attributes our icons tend to come out with, that are unnecessary 2) altering the transform scaling logic to accept that our icon files aren't suffixed by _24px (even though our icons are always 24px x 24px). Instead I implemented a dynamic algorithm to scale to variable width and height values in viewBox (this will be useful in custom icons described in improvements here #131).

babel.config.json exists to be passed to the "src:icons" script (see package.json). The config is necessary to run builder.js or it will produce errors about "es" modules, needing to mark "module" type and such.

Installed only required packages.

> npm i -D @babel/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime fs-extra glob mustache path rimraf svgo temp yargs

Later commits:

• upgrade SVGO to 2.x, since the copied script used an old v1.3.x (follows by example from Mui's next branch modifications, also includes some modifications/upgrades around the svgo usage)
• mark pkg as side-effects free
• output icons in .tsx not .js
• fix bugs

[WilliamKelley]

I ended up adding some more commits, notably upgrading SVGO to latest and converting our outputted files to be .tsx so that the build can capture types correctly.

[seigler]

This is dynamite.

[shadoath]

wow, impressive conversion here.
Nice work threading it all together.