Skip to content

Icon Styling

Warren Gifford requested to merge tim/icon-styling into main

Created by: zlonko

This closes #5432. It centralizes our icons in a flexible component and updates styling across the About site.

Changelog

  • Moves icons into Icon component
    • Accepts icon name, size, onClick, additional classes, etc.
    • Implements new icon styling on variant="boxed"
    • Allows for plain icon when variant prop is omitted
  • Uses the Material UI icon library identified in conversation with Tracey

New icon style: Screen Shot 2022-06-16 at 9 01 55 AM

Notes

  • Spotify and Twitch logos are the only remaining mdi-react icons. They were not available in the library. Are we open to replacing these with SVGs?
  • I ran into an issue rendering blogposts with BlockquoteWithBorder due to the inclusion of the Icon component. TIL when a component is passed into another component, and then used as in MDX, Next does not use the Babel-aliased path when reading the component. So, Icon needs to be imported with a relative path in BlockquoteWithBorder for MDX to find it.
  • Still working on optimizing the bundle size (see comments in issue). From the MUI Docs it seems that tree-shaking should be happening automatically, and the site seems load quickly despite the larger bundle size measured on the production build. I am looking to learn more about this, so I appreciate any feedback!

Test

  1. Ensure prettier has standardized the proposed changes.
  2. Check that icons are rendered according to the new style on the following pages
  • /use-cases and Use Case pages
  • /code-insights
  • /case-studies/nutanix-fixed-log4j-with-sourcegraph
  1. Please check that there are no breaking changes with plain icons
  • Arrows in carousels and blockquotes appear and function as expected
  • Company logos (GitHub, Twitter, etc.) render at consistent sizes

Merge request reports