Icons to components

[nick-next]

Description

Material icons are used throughout the Data Commons site, and these usages are primary done via Google Fonts. While this is convenient, there is a drawback in that the icons only render after the font has completed downloading. This can cause flashes of unstyled content. In some cases, these flashes are significant enough to cause major flashes (as the span takes up a significant amount of space before the font loads).

An earlier PR made initial updates to solve the more obvious flashes (particularly in the header bar) by replacing the Material fonts with inline SVGs.

This PR aims to continue that process by creating an extensible library of font components to replace those inline SVGs.

This PR includes icons that the are currently used, and converts font usage to icon component usage on recently revamped header and home pages. If this approach is approved, we can expand this approach everywhere, with the eventual goal of removing the fonts completely.

This PR also removes a final FOUC in the header (relating to a remaining font-based icon usage.

The goals are:

• To have the library as light as possible and to avoid heavy third-party libraries where possible. For example, we elected not to use a library such as mui/icons-material, as this requires MUI.
• To allow for the icons to be styled (sized and colored) via the CSS.
• To allow the React icons to be styled directly via props (that, if given, override the CSS).
• To have the solution flexible: we primarily use Material icons, but we can use other icons as needed.
• To have each page only import and include the icons it needs.
• To have the ability to support both the React app portion of the site (via React components) and the page template side, via template macros.
• To replace all current usages of inline SVGs with either the components or the macros

Notes

In this approach, we include the icons we need (and only the icons we need) without relying on a third-party library. This way, we do not need to import heavy dependencies and have full control over the icon set we use. The icons are easy to add - the SVGs being available from https://fonts.google.com/icons. If this overall approach is approved, we can write a script that, given a new icon we want to use, downloads it and prepares it automatically.

Example Usage

Replacing a font-based Material icon:

Old

<span className="material-icons-outlined">
     arrow_forward
</span>

New

<ArrowForward />

Replacing an inline Material Icon:

Old

<svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="#5f6368"
>
  <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
</svg>

New

  <KeyboardArrowDown size="24px" color="#5f6368" />

Replacing an SVG (or font-based icon) in a template:

Old

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z"/></svg>

New

{{ inline_svg('progress_activity') }}

[dwnoble]

Looks great!

Can write you add the instructions for adding new icons to flask & react at docs/icons.md, and link to that from docs/developer_guide.md ?

[nick-next]

Can write you add the instructions for adding new icons to flask & react at docs/icons.md, and link to that from docs/developer_guide.md ?

Done!

I've just added in a python script that makes the job of creating the icons simple.

For example, to create an ArrowRight icon, you would run python3 generate_icon.py arrow_right. The script will fetch the icon from Material and by default build both the flask version and the React version (with flags to change that behavior).

I've put description of how to use the script to generate the icons, how to create the icons manually if we ever need to (maybe for an icon not available from Material), and how to use the icons in the code.

The README is in the same directory as the script (in /tools/resources) and linked to in the developers guide. Let me know if there is any other documentation or adjustments needed!