Icons to components #4739
Icons to components #4739
Conversation
| export const ArrowBack = ( | ||
| props: React.SVGProps<SVGSVGElement> | ||
| ): ReactElement => ( | ||
| <svg |
There was a problem hiding this comment.
Would it make sense to load the vector from a flat .svg file here? The both the client & server side could use the same directory of svg files (not sure how easy that is with the current folder structure).
There was a problem hiding this comment.
I was actually thinking about this at first (and did some looking into it).
It's not impossible, but would require that we set up webpack to be able to handle svgs generally (with a library like svgr) so that we could import them into the React component as a module.
For now, to avoid the extra library and altering the webpack config, I've kept them separate, but that is something we can do.
However, I have set up script that makes importing the icons (and setting them up in both places easier), and would also alleviate the need to manually set up the icons in both places. I'll describe the script in the next comment! Let me know if this set up would work, or if you would prefer the webpack/svgr type route.
There was a problem hiding this comment.
Thanks @nick-next -that makes sense! The script & embedding svgs directly sounds good to me
|
Looks great! Can write you add the instructions for adding new icons to flask & react at |
…le Font-based to SVG-based. This commit creates the two SVG icons that had been used already as SVGs directly, and adds a wrapper component for convenient manipulation of the icons. It replaces those SVGs with the icon versions. Further work will replace the font-based icons that have not yet been converted to SVGs.
…directly into jinja templates (with the goal in mind of extending this ability to use flash-less icons to the templates). This parallels the React icon components.
…e (allowing the icon to be sized without the need for the wrapper component). Removed the wrapper component. Converted the search bar icons to direct SVGs.
…n icons (either in React component or SVG form or both). This commit also includes documentation added to the developer guide and separate documentation describing how to use the script, how to create icons manually if required and how to use the icons in either React or the templates.
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 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/generate_icon.py
Outdated
| import sys | ||
| import xml.etree.ElementTree as ET | ||
|
|
||
| import requests |
There was a problem hiding this comment.
Can you add a requirements.txt file that includes this dependency?
tools/resources/README.md
Outdated
| following command: | ||
|
|
||
| ```bash | ||
| python3 generate_icon.py {icon_name} |
There was a problem hiding this comment.
Can you add a "run.sh" wrapper for this script? That will ensure dependencies get installed before running the tool. See some other scripts in the tools project for some examples, but it should look something like:
python3 -m venv .env
source .env/bin/activate
python3 -m pip install --upgrade pip setuptools
python3 -m pip install -r requirements.txt
python3 generate_icon.py "$@"
…sh bash script that installs those requirements in a venv and runs the script.
## 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') }} ```
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:
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
New
Replacing an inline Material Icon:
Old
New
Replacing an SVG (or font-based icon) in a template:
Old
New