Provide a mechanism to swap out built-in component icons to custom icons

[origami-z]

To support adoption, need to a way to swap out built-in icons, e.g. icons in status indicator, chevron in accordion

• API (e.g. start with a separate Provider implementation, later to decide whether to merge with SaltProvider)
• Full list of names and default value documented
• Custom icon requirement (e.g. have to use Salt icon generation script? is it just --icon-color in Icon.css?)

Example (not to be final API), from user point of view

import {CustomErrorIcon} from '@another-library/icon';

const customMapping = {
   error: CustomErrorIcon
  // expand, collapse, submenu, status (error/warning/success/info), overflow, user profile
};

<SemanticIconProvider value={customMapping}>

Icon provider should fill in fallback icon, i.e., all other icons will be default to Salt icons. All components using error icon (e.g. StatusIndicator) will be using CustomErrorIcon.

From Salt internal perspective, it will be something like

before:

// e.g. in dropdown
<ChevronUpIcon aria-hidden />

after:

// useSemanticIcon, the hook will get either a custom icon passed in or default Salt icon
const SemanticExpandIcon = useSemanticIcon("expand"); 

<SemanticExpandIcon aria-hidden />

Questions:

1. Is it possible to make different component to pick different icons? e.g. Dropdown's expand/collapse icon v.s. Accordion expand/collapse icon, what if a user want to only swap out Accordion expand icon not Dropdown. Possibly related to #3939
   1. Audit differences between DS, same semantic icon used in different components? e.g. Accordion vs Dropdown case
2. Is it possible to change icon color in a component via custom icons? e.g. Accordion chevron to use a different color than Salt ones.

---

Design in #3625

https://www.figma.com/design/xET9vAEtgJ7w29lGNGAcrF/Salt-(Next)-Iconography?node-id=41-2264&t=8DBsM4nqta9xP3Vb-1

[pseys]

FYI @bhoppers2008

[mark-tate]

Goal: by EOS have a plan for the approach

[origami-z]

Aug 12 - will start later in the week

[joshwooding]

Aug 14 - Working on the mappings.

[joshwooding]

Aug 20 - ready for review

[origami-z]

Aug 23 - Blocked by icon naming confirmation, which was thought to be done in #3625 (but was rescoped to Figma work)

[bhoppers2008]

@bhoppers2008 to send Vineet semantic icon names for build. Can review once updated. @pseys

[origami-z]

Caught up with @Vineet119

• Only include Salt's icon name (not include additional ones needed from Pepper). It's easier to add more if Pepper's design desire for different icons (e.g. dropdown vs accordion) is justified for Salt to support.
  • Need to ask Pepper designer to provide why different icons are needed
• Wait @pseys back to update missing names (e.g. calendar, sub-menu chevron icon, etc.)

[origami-z]

Salt / Pepper icon difference audit link - https://www.figma.com/design/6yIx5tpSk2y1b4alYaifi2/Pepper-workspace?node-id=395-6227&t=MXYz08aI3q0Cf7rs-1

[origami-z]

Meet with @pseys and @Vineet119

• Only consider Salt icons for this version
  • Pepper specific asks (e.g. accordion vs dropdown difference) needs to be reviewed and decide whether those should be applied to all Salt users
• Potential icons needs review, from Salt last icon review
  • Chevrons (right, up, down), used in, e.g. Accordion, Dropdown, Menu
  • Close vs Close small, any use?
  • Checkbox icons
  • Incoming tree, chevron vs triangle, rotation (0, 90, 45?)
• Icons used in Salt examples, will not be included in the semantic mapping. This aligns similarly with components vs patterns approach.

[mark-tate]

Espresso Goal: design to unblock themselves, feature released by 13th September

[bhoppers2008]

@origami-z @Vineet119 the design guidance is linked to this issue here: https://github.com/jpmorganchase/salt-ds/issues/3625#issuecomment-2306764388

@pseys we need a plan for what we do with this information.