Make icons index.ts/index.d.ts more easier for TS to work with

[markjm]

Resolves #300, improving TS resolution time for this package.
Also re-casts these functions to unknown first to allow TS to bypass typechecking these icon functions.

[ghost]

All CLA requirements met.

[layershifter]

@markjm can you please provide measurements to show before/after? As it's also changing JS output it would be good to see a comparison with Webpack bundling.

For context, we already had an issue with minified output (microsoft/fluentui#20912) that was caused by a bug in acorn (webpack/webpack#14922, acornjs/acorn#1083).

[ling1726]

@markjm can you please provide measurements to show before/after? As it's also changing JS output it would be good to see a comparison with Webpack bundling.

For context, we already had an issue with minified output (microsoft/fluentui#20912) that was caused by a bug in acorn (webpack/webpack#14922, acornjs/acorn#1083).

#373 resolved the minification issue, but I don't see babelrc being modified in this PR. would be great to check to be sure. Thx!

[layershifter]

To get measurements with Webpack you need { profile: true, parallelism: 1 } in Webpack config and simply import an icon:

// main.js
import { ICON } from '@fluentui/react-icons'
console.log(ICON)

It will output something like that:

[markjm]

I have recently left Teams, where this was particularly impacting (when TS checking each package seperately). There should be a doc on that floating around somewhere, but I no longer have access to it. I can try to make a dummy app to profile with next week, but I will be away from my computer for a few days.

Aside from being placed in different files, the output javascript should be identical, but the output .d.ts should be more performant.