Add Material icons package and svgr #32236
Conversation
In order to support the flagUrl() library function, we now mock svgr's return value, including the "default" export with the URL to the SVG file. This allows us to continue importing the ReactComponent for an SVG while also supporting use cases like flagUrl().
griffbrad
added
the
[Status] Needs Review
|
Great work, @griffbrad ! SVGR is a much simpler pipeline than what we're currently doing in e.g. gridicons. I'm wondering what the expected use of these Material icons is going to be in the future, however. If we expect to see widespread usage of many icons across the application, I'd argue against this SVG-in-JS approach. JS is byte-for-byte much more expensive than images, since it requires additional parsing and compilation, even if it's not executed. In addition, wrapping these icons in JS invalidates any performance oprimisations the browser would otherwise be able to perform, such as deprioritising download vs other resources, and would hurt cacheability if bundled in with the rest of the JS. If you're expecting significant usage, I'd argue for either an SVG spritemap approach (provides a good balance between cacheability and number of HTTP requests), or a plain one-SVG-file-per-icon approach (optimum cacheability, but potentially large number of requests, which could be problematic for HTTP 1.x connections). Both of these keep images as images, allowing the browser to do its thing well. The icons are still styleable if you make use of SVG This is what I'm currently experimenting with in #32172 for gridicons, and appears to be working well. |
|
I like the gridicons approach in #32172 with svg4everybody. Will get this PR switched over to be compatible with that approach and ping you to review. Thanks for the pointer! |
|
This PR is superseded by PR #32364, which uses the svg4everybody polyfill rather than svgr. |
matticbot
removed
the
[Status] Needs Review
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 these icons, I'm using svgr, which is also under consideration in core/Gutenberg (WordPress/gutenberg#14628). This loads the SVG with webpack and transforms it into a React component.
The only place where we load SVGs currently is
client/lib/flags, which required a minor update to continue working as expected.This isolates the dependency changes from the remainder of the nav drawer work, which hopefully will aid review and ease merging.
Testing instructions
import { ReactComponent as SvgTest } from 'material-design-icons/action/outline-offline_bolt-24px.svg';.