[@ukic/react]: Review use of MUI icons in React components
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## What is the purpose of the work?
At the moment, `SlottedSVG` is the preferred way to import Material Icons (from the [`@mdi/js` package](https://pictogrammers.com/docs/library/mdi/getting-started/react/)) into ICDS components. However, a review is required to experiment with slotting [MUI icons](https://mui.com/material-ui/material-icons/) (Material Icons as React-wrapped SVG Icons) in different ways and making styling updates where relevant.
```jsx
// Example
```
Below is a list of components which use icons:
- Breadcrumbs
- Buttons
- Card
- Chip
- Data Entity
- Side Navigation
- Switch
- Tabs
- Text Field
- Top Navigation
## Why do we need it?
Adding flexibility to use MUI Icons with ICDS components.
Contributor guide
Research direction
Start by reviewing the listed ICDS components that use icons, beginning with the existing SlottedSVG usage and the MUI React icon example in the issue. Compare possible slotting and styling approaches across Breadcrumbs, Buttons, Card, Chip, Data Entity, Side Navigation, Switch, Tabs, Text Field, and Top Navigation; done means the supported approach and relevant styling updates are established for these components.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100