feat(icon): review icons bundle

[epessina]

Description

This PR aims at changing how icons are served and bundled.

The main problem with how icons are handled now is the bundle size: the <Icon /> component works by accepting the name of the icon which is resolved from a dynamic map that contains all the SVGs of three different icon packs. This approach results in all the SVGs being added to the library bundle, which subsequent bundlers cannot tree shake, given that at runtime any of the values of the aforementioned map could be used (in the bundle of applications using it, the library weights at least 6 MB regardless of the number of used components).

To solve this issue, this PR fundamentally changes how the <Icon /> component works, making it a wrapper that accepts the SVG to render as a React function component. This way we can provide a standard interface while leaving the possibility to load any SVG asset without adding bulk to the bundle size.
It follows an example of the usage of the new component.

import { Icon } from "@mia-platform-internal/console-design-system-react"
import MySvg from "./assets/my-svg.svg?react"

const App = () => <Icon color="#ce2020" size={48} component={MySvg} />

To still provide the user with a set of "recommended" icons, a new @mia-platform-internal/console-design-system-react/icons sub-package has been added to the final NPM package. The package contains the icons from the same three packages that were shipped before (Ant Design, Phosphor, and Feather) as well as a set of Mia-Platform-specific custom icons.

To make dynamic import of single icons possible, each icon in the package has its own file (more precisely a set of three files: the esm index, the cjs index and the declarations file).

Therefore, the icon components can be accessed from the package as named imports:

import { PiAddressBook } from "@mia-platform-internal/console-design-system-react/icons/pi/PiAddressBook"
import { FiHome } from "@mia-platform-internal/console-design-system-react/icons/fi/FiHome"
import { AiFillAlert } from "@mia-platform-internal/console-design-system-react/icons/ai/AiFillAlert"
import { MiMiaPlatform } from "@mia-platform-internal/console-design-system-react/icons/mi/MiMiaPlatform"

or as dynamic imports:

import('@mia-platform-internal/console-design-system-react/icons/mi/MiMiaPlatformColored')
  .then(({ MiMiaPlatformColored }) => { /* do something */ })

The icons sub-package can be automatically constructed by launching the build-icons script.

On top of this, the PR upgrades the vite-plugin-svgr dev dependency to the latest major (version 4.2.0).

Note that this PR is breaking since it changes the interface of the <Icon /> component. Migrating, however, is simple enough:

import { Icon } from "@mia-platform-internal/console-design-system-react"
+ import { PiAddressBook } from "@mia-platform-internal/console-design-system-react/icons/pi/PiAddressBook"

- const App = () =>  <Icon name="PiAddressBook" />
+ const App = () =>  <Icon component={PiAddressBook} />

Checklist

• commit message and branch name follow conventions
• tests are included
• changes are accessible and documented from components stories
• typings are updated or integrated accordingly with your changes
• all added files include Apache 2.0 license
• you are not committing extraneous files or sensible data
• the browser console does not have any logged errors
• necessary labels have been applied to this pull request (enhancement, bug, ecc.)

[danielemarostica]

LGTM

[fredmaggiowski]

LGTM

[davidebianchi]

LGTM

[Danielecina]

I think you should wait before merging this PR. We would be testing a solution to async import specific icon

[danibix95]

Hi! Is this PR ready to be merged?