Theme: Icon switching

[pseys]

EOS: Approved approach to swapping Icons in Salt (Next) Figma library.

[pseys]

POC 1

Concept: Create 'semantic icon' component Outcome:

• 👍 Works as expected – provides the ability for a designer to select the icon component and switch icon libraries for a limited number of semantically mapped icons
• 👎Put the effort onto the core design team – any future libraries or additional semantic mappings needed would require the core design team to add them into the component library
• 👎Icons can only be changed on a case by case basis – each icon within a design would need to be manually swapped if a different library is needed, including status icons, dropdown chevrons, etc.
• 👎 No way to set a default library or control with variables

POC 2

concept: Add 'semantic icons' to existing Salt icon library and enable library swapping in Figma Outcome:

• 👍 semantic icon collection created
• 👍 second (test) icon library with icons mapped to same semantics created
• 👍 swapping libraries allows designers to swap all icons in a file with one action
• 👎 library swap would need to be carried out periodically, as newly added components would revert to the original icon library
• 👎 In POC library swap failed -
• 👎 Figma won't recognise/swap nested icons – as icons are mostly contained within the icon component this prevents us from adding the ability to swap libraries

Summary

Option 2 seems to be the better solution, however, additional work needs to be carried out to the component library and icon library to test further.

• Icons in the icon library need to be changed so that their base size (W/H) are derived from a variable: size-icon
• Icons in the icon library need to be changed so that their base colour is derived from a variable: content-primary-foreground
• Nested icons within the Salt (Next) component library need to be changed from the icon component to icons directly from the Salt icon library

Once these tasks have been completed a follow-up POC can be run.

[mark-tate]

Goal: Icon Library - change width/height color of all icons S(3) (Resolved in this 3628) Nested Icons - need to be changed from the icon component to icons directly from the Salt icon library (To be resolved in this issue)

[pseys]

Goal: Icon Library - change width/height color of all icons S(3) Nested Icons - need to be changed from the icon component to icons directly from the Salt icon library

I've created an issue for the first goal #3628

[bhoppers2008]

Investigate if we need the icon and country symbol at all (in the Salt Next library) or can we control the scaling using the figma only variables.