elastic / elastic/eui

[EuiIcon] Migrate from class to function component

Open
#9,487 1 comment 0 reactions 0 assignees View on GitHub
help wanted low hanging fruit
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

`EuiIcon` renders SVG icons with support for built-in icons, custom SVGs, and async icon loading. Used throughout every EUI application.

- **File:** `components/icon/icon.tsx`
- **Class size:** 209 lines
- **State:** `icon`, `iconTitle`, `isLoading`, `neededLoading`
- **Lifecycle:** `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`

**Migration notes:**

PureComponent with async icon loading. `componentDidMount`/`componentDidUpdate` trigger icon imports, `componentWillUnmount` prevents state updates on unmounted component. The async loading pattern maps to `useEffect` with abort/cleanup. Replace `PureComponent` with `React.memo`.

**Acceptance criteria:**

- [ ] Convert to function component with `React.memo`
- [ ] Maintain async icon loading with proper cleanup
- [ ] Maintain loading state transitions
- [ ] All existing tests pass
- [ ] Verify no flash of missing icons during loading

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.