Icons package

This package bundles all project-specific SVG icons in a node module.

It uses the svgr CLI and typescript to turn a source set of SVG icons into a resultant set of React components. The steps are:

  1. Use svgr to convert icons in src/main/svg to tsx components in src/main/generated.
  2. Run a typescript build to convert the generated components into ES2020 modules in the dist folder.

Contribution

To add a new icon that isn’t available as a Carbon Icon or Carbon Pictogram:

  1. Download the latest Sketch file from Box.
  2. Add attribution where required so we can do manual open-source audits for all icons that didn’t come from Carbon icon and pictogram code packages.
  3. Size the SVG at its intended size so we can be pixel-precise for standard density displays (SVGs can get resized in the web app so this isn’t overly important.)
  4. Include an internal 2px padding for 32px icons per IBM Design Language specifications (1px padding for 16px icons.)
  5. Ensure the fill colors are all black.
  6. Use a slice to export the SVG (so we can preserve internal padding.)
  7. Place the SVG in the path specified above.
  8. Run a build prior to using the optimized SVGs as React components in the web app.
  9. Upload the new version of the Sketch file to Box.