Add/material design icons and svg4everybody

[griffbrad]

Changes proposed in this Pull Request

Add a package for storing the Material icons we're using in the new nav drawer work (see PR #31742). The official material-design-icon package (https://github.com/google/material-design-icons) has not been updated since Jan 2018. It is missing several icons we intend to use.

To load SVGs, I use the technique @sgomes introduced in PR #32172. This uses svg4everybody to polyfill the use of external references in SVG <use> elements, enabling the browser to load and optimize SVG rather than converting SVGs to React components.

Testing instructions

With this PR, you can use the new MaterialIcon component to render an icon. Example:

import MaterialIcon from 'components/material-icon';  

const Icon = <MaterialIcon size={ 24 } icon="offline_bolt" />;

[matticbot]

Test live: https://calypso.live/?branch=add/material-design-icons-and-svg4everybody

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime
webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

name      parsed_size    gzip_size
manifest         +0 B        +12 B  (+0.0%)

App Entrypoints
Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

name   parsed_size           gzip_size
build        +84 B  (+0.0%)       +4 B  (+0.0%)

Async-loaded Components
React components that are loaded lazily, when a certain part of UI is displayed for the first time.

name                          parsed_size           gzip_size
async-load-design-playground       +772 B  (+0.0%)     +300 B  (+0.1%)
async-load-design-blocks           +772 B  (+0.0%)     +412 B  (+0.1%)
async-load-design                  +772 B  (+0.0%)     +480 B  (+0.1%)

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[blowery]

@griffbrad I added the MaterialIcon to the playground scope just to be able to test it out there. Looks good! We might want to add an example to devdocs too, but that can probably wait for another PR.

[blowery]

LGTM

[sgomes]

@griffbrad Looks like the readme needs to be updated in a future PR.

[griffbrad]

Thanks for the heads up. Will post that later today.

[sgomes]

@griffbrad This line is interesting. How does this import get converted into a path string, and how would I be able to replicate it in gridicons?

[blowery]

https://github.com/Automattic/wp-calypso/blob/master/packages/calypso-build/webpack/file-loader.js

file-loader magic

[griffbrad]

This is done with webpack's file-loader. In the context of Calypso, it's added to webpack.config.js here:
https://github.com/Automattic/wp-calypso/blob/master/webpack.config.js#L234

That comes out of the Calypso build package:
https://github.com/Automattic/wp-calypso/blob/master/packages/calypso-build/webpack/file-loader.js

[sgomes]

Very interesting, thank you both! Should be easy to replicate for gridicons, then :)

[sgomes]

Excellent work, @griffbrad, some great improvements on my experimental PR! I'll be sure to copy what you did here when I start work on gridicons 🙂

[paaljoachim]

I am thinking that you might have some good input on the Add icons block being proposed for Gutenberg Core. WordPress/gutenberg#16484

[sgomes]

Thanks, @paaljoachim, I'll take a look!