Updating or Adding Icons to Sage

Font Files

1. Work with Design to obtain an updated set of font files

   • Design will create a zip file including all new versions of the Sage.eot, Sage.svg, Sage.ttf, and Sage.woff files.

2. The new font files will need to be sent to the Sage Experience team to be uploaded to our CDN.

Creating New/Updated Unicode List

A new unicode list will need to be created and added to packages/sage-assets/lib/stylesheets/tokens/_icon.scss. The new list can be created by performing the following steps:

1. Open style.css file contained in the .zip file that was delivered by design.

   Screenshot

2. Delete @font-face and .icon-sage from style.css file. Approx line 1-27.

   Screenshot

3. Find/replace to remove .icon- from all properties

   FIND

   .icon-
   

   REPLACE:

   Screenshot

4. Find/replace to update before {content: "\ to unicode(

   FIND

   before {
     content: "\
   

   REPLACE: Note: unicode includes a space before

    unicode(
   

   Screenshot

5. Find/replace to update ";} to ),

   FIND

   ";
   }
   

   REPLACE:

   ),
   

   Screenshot

6. Remove the calendly items from the list

   Screenshot

7. You should now have the new list and can copy/paste it into packages/sage-assets/lib/stylesheets/tokens/_icon.scss.

   Screenshot

Update CDN Variable:

When a new icon set is generated the new font files will be uploaded to a new directory on the CDN. The $-icon-font-cdn-version variable should be updated to match this new directory.

1. Confirm new directory has been created on CDN with the Sage Experience team.
2. Open packages/sage-assets/lib/stylesheets/components/_icon.scss
3. Update $-icon-font-cdn-version to match new CDN directory.

NOTE: Once the new files are in place and the CDN version is updated check the dev tools network panel to verify the fonts are being loaded from the new directory.

Network Panel

Rails

1. Add the new icon aliases in ./docs/lib/sage_rails/app/sage_components/sage_tokens.rb.
2. Confirm that all icons and any new or revised ones appear in the docs site under Foundations > Icons.

React

1. Add the new icon aliases in ./packages/sage-react/lib/configs/tokens/icons.js.
2. Confirm these changes are reflected in Storybook under the Icon component by changing the icon prop to new or revised settings.