chore: migrate Icon to ADR-0003 and ADR-0004 (DSYS-487)

[cursor]

Description

Migrates the Icon component to follow ADR-0003 (String Unions) and ADR-0004 (Centralized Types Architecture) as part of the DSYS-468 Component ADR Migration epic.

Changes

Shared package (@metamask/design-system-shared):

• Created packages/design-system-shared/src/types/Icon/Icon.types.ts with:
  • IconColor — const object for the common set of icon colors (14 entries shared by both platforms)
  • IconName — const object for the common set of icon names (all icons present in both React and React Native)
  • IconPropsShared — shared props type with name: string and color?: string; size is intentionally excluded as values differ between platforms
• Exported all Icon types from packages/design-system-shared/src/index.ts

React package (@metamask/design-system-react):

• Converted IconSize enum → const object (React-specific values: 'xs'/'sm'/'md'/'lg'/'xl')
• Replaced IconColor enum with re-export from shared
• Replaced IconName enum with React-extended const object (spreads shared IconName and adds PopUp and SidePanel which only exist in the React package)
• Updated Icon.types.ts to extend IconPropsShared
• Updated Icon/index.ts to export from ../../types

React Native package (@metamask/design-system-react-native):

• Converted IconColor enum → const object (RN has 6 extra colors beyond the shared set)
• Converted IconSize enum → const object (RN-specific values: '12'/'16'/'20'/'24'/'32')
• Replaced IconName enum with re-export from shared
• Updated Icon.types.ts to extend IconPropsShared
• Updated Icon/index.ts to export from ../../types

Platform differences handled

Type	Strategy
IconName	Shared has common names; React extends with PopUp + SidePanel
IconColor	Shared has 14 common colors; RN adds 6 extra (pressed states, alternatives)
IconSize	Platform-specific (different string values) — kept in each platform's types

Related issues

Fixes: DSYS-487

Manual testing steps

1. Build the packages: yarn build
2. Run tests: yarn test
3. Verify Icon component renders correctly in Storybook: yarn storybook
4. Check that IconName, IconColor, IconSize can still be imported from both @metamask/design-system-react and @metamask/design-system-react-native
5. Verify IconColor and IconName can be imported from @metamask/design-system-shared

Screenshots/Recordings

Before

No visual changes — this is a pure internal refactor.

After

No visual changes — this is a pure internal refactor.

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

  

[github-actions]

📖 Storybook Preview

• View PR Storybook