mi6 / mi6/ic-ui-kit

[@ukic/react]: Review use of MUI icons in React components

Open
#431 1 comment 0 reactions 0 assignees View on GitHub
all components dx spike
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.