Skip to content
This repository has been archived by the owner on Aug 9, 2024. It is now read-only.

Updating Icons

Phil Schanely edited this page Mar 20, 2020 · 1 revision

When new icons are needed use the following process:

  1. Work with Design to obtain an updated set of fonts and place them in the app/assets/fonts/sage folder, replacing the existing Sage.eot, Sage.svg, Sage.ttf, Sage.woff, and Sage.woff2 files there.

  2. Add the new icons to the icon token map:

    • Open app/assets/fonts/sage/Sage.svg and app/assets/fonts/sageapp/assets/stylesheets/sage/tokens/_icon.scss
    • Look in Sage.svg for the new <glyph> additions and add corresponding entries in the $sage-icons map in _icon.scss: Match the glyph-name and unicode attributes from Sage.svg to the format already in place in _icons.scss.
    • Add corresponding items in app/views/sage/pages/icon.html.erb following the format in place there.
    • Confirm that the new icons appear as expected in the Icons page in the browser.
  3. Ensure that any pre-existing icon names and unicode characters are still in sync with the Icon tokens map. Work with Design to resolve the discrepancies, favoring keeping the Icon map file as the rule. Otherwise, changes will need to be considered throughout any application that uses Sage icons.