salt-ds
salt-ds copied to clipboard
Provide a mechanism to swap out built-in component icons to custom icons
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
inIcon.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:
- 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
- Audit differences between DS, same semantic icon used in different components? e.g. Accordion vs Dropdown case
- 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