@spinnaker/core

One Icon Font to Rule Them All

The goal is to migrate Spinnaker's design system Iconography to one font file that only contains icons used in the project. This will help on our road to supporting mobile, simplify usage, and allow any future designer to maintain without knowing git.

Icomoon

Icomoon.io provides a GUI for uploading, managing, and exporting icon fonts.

To update the icon font using Icomoon, do the following:

• grab the JSON in our repo: deck/app/fonts/spinnaker/selection.json
• go to Icomoon.io and create a new project (the title doesn't matter)
• click the "Import Icons" button and select selection.json and import all settings
• now select "Import Icons" again to choose your addition(s) (svg format is best)
• when satisfied with the changes, click "Generate Font" at the bottom.
• make sure all glyphs are selected, then click "Download" at the bottom.
• After unzipping the download, rename styles.css to icons.css
• replace the following files in the deck repo with your new ones: icomoon.svg, icomoon.ttf, icomoon.woff, selection.json, icons.css
• you may need to run npx prettier --write app/fonts/**/*.{css,json} if prettier has not picked up the new files.

Icon Resources

The Spinnaker project currently uses icons from multiple libraries, but will be migrating to Streamline Light. This package was decided based on its volume of technical icons, and its visual pairing with Source Sans, the Spinnaker font.

Netflix Teammates can find the Netflix-licensed Streamline icons in: Google Drive⁩ ▸ ⁨Team Drives⁩ ▸ ⁨Delivery Engineering⁩ ▸ ⁨Delivery Experience (DEx)⁩ ▸ Iconography

All custom icons are there as well.