[v4] load icons asynchronously

[adidahiya]

Fixes #2193

Checklist

• Includes tests
• Update documentation

Changes proposed in this pull request:

• All packages now build to a "es2020" module target. This is nearly identical to the previous "es2015" target, but now has support for dynamic import() expressions (MDN docs).
  • ⚠️ You will have to ensure that your build system is able to transpile / handle this new ES syntax. If you are using modern browsers, modern Node.js, modern Webpack, and/or @babel/plugin-syntax-dynamic-import, this should require no action on your part. In other words, most modern tooling in the JS ecosystem does support this new feature.
• Expose a singleton class API { Icons } from "@blueprintjs/icons" to load specific icons from the icon set
• Expose individual icon SVG component modules, e.g. import { Download } from "@blueprintjs/icons"
• <Icon> component's static SVG path string loader has been replaced by a loader that uses a dynamic import() expression
• Because of the dynamic import change, I have changed all BP component source code to use static icon module imports instead of the string literal API. This means they will work out of the box without any user configuration.

Reviewers should focus on:

• Developer experience of icon loader
• Performance of dynamic import

Screenshot

[blueprint-bot]

Merge branch 'v4' into ad/icons-loading

Previews: documentation | landing | table

[blueprint-bot]

fix icon test suite

Previews: documentation | landing | table

[blueprint-bot]

fix iso test compilation

Previews: documentation | landing | table

[blueprint-bot]

fix tests, dist

Previews: documentation | landing | table

[switz]

I'm seeing every icon imported into my nextjs app on 4.0.0. Is there a specific API I should be using to treeshake them dynamically? https://nextjs.org/docs/advanced-features/dynamic-import

Before I was overriding the generated/svgPaths file. I generally specify my icons via: <Icon icon="caret-down" /> but I can switch to explicit imports if that helps.

[adidahiya]

@switz can you open a new issue and we can try to debug from there? you shouldn't need to configure anything if you're using webpack (which Next.js does use under the hood); this bit of code should be doing the dynamic import for you:

blueprint/packages/icons/src/iconLoader.ts

Lines 36 to 49 in 184cab8

	/**
	* The default icon contents loader implementation, optimized for webpack.
	*
	* @see https://webpack.js.org/api/module-methods/#magic-comments for dynamic import() reference
	*/
	const defaultIconContentsLoader: IconComponentLoader = async name => {
	return (
	await import(
	/* webpackInclude: /\.js$/ */
	/* webpackMode: "lazy-once" */
	`./generated/components/${name}`
	)
	).default;
	};

[alex-kinokon]

@adidahiya Is this change reversed? import { Download } from "@blueprintjs/icons" no longer works for 4.0.0-beta.2.

[adidahiya]

@proteriax yes, see my comment #4645 (comment)