Review icon fonts/library for performance improvements [SPIKE]

[ericerway]

This issue is for the following packages:

[X] venia-concept [ ] pwa-buildpack [X] peregrine [ ] pwa-devdocs [ ] upward-js [ ] upward-spec

This issue is a:

[ ] Bug [ ] Feature suggestion [ ] Documentation issue [X] Other (Please Specify)

Environment

Question	Answer
Magento version
Operating System + version
node.js version (node -v)
npm version (npm -v)

Description

Continued review of Javascript size should include our use of feather-icons for Venia to ensure high performance for our reference storefront in PWA.

Expected result:

[ ] Summary of results; recommended improvements [ ] Creation of new issues/stories (as appropriate)

Possible solutions:

[ ] Optimization of current library to remove unused icons (preferred) [ ] Review of alternate icon fonts/libraries for performance

[sirugh]

Spitballing some notes/ideas/planning around this:

• FeatherIcons seems to give you all or nothing in regards to its exports. It doesn't look like you can import specific icons.
• Minified feathericons is ~16kb encoded.
• We can use webpack stats to compare various icon package sizes (if the publisher doesn't already list it) and then pick whichever is "lightest".
• Because of the "dynamic" nature of Icon component we probably cannot utilize tree-shaking OOTB. With a different icon package we may be able to do away with the Icon component and import specific icons.
• react-feather is an open source react implementation that allows for specific imports. Looking at the source, the maintainer basically implemented each of the feather icon svgs in a unique component.

Webpack Bundle Stats

With feather-icons, ~17kb gzipped:

With react-feather, ~1kb gzipped (with specified imports):

[ericerway]

Thanks for the readout @sirugh -- @jimbo can help with the rationale and collaboration on which option to move forward with on this one.