edda commented 7 months ago

The way the Icon component in juno-ui-components works at the moment is that we have to hardcode which icons from the Material UI icon pack we offer. This is a lot of boilerplate and also annoying to do. Ideally I would like this to work such that in addition to some hardcoded icons that we provide ourselves users can pass the MaterialUI icon name as a prop to our Icon component and then it works the same as it does now.

The problem is that we import the MaterialUI icons as components in our Icon component because we have to pass some props to them (regarding size, color, etc.). If the user can just pass the icon name as a String prop we'll have to create some sort of dynamic import. Or maybe there's another way to do it.

Expected features:

any icon present in the @material-design-icons/svg lib can be used by passing the icon's name as prop to the Icon component
all features of the Icon component still need to work (e.g. color, size, etc. props need to be forwarded to the imported icon
ideally we'll still have some sort of fallback that if the user mistyped or provided an unavailable icon name that it falls back to either a default icon or at least it should fail gracefully

TilmanHaupt commented 7 months ago

471

TilmanHaupt commented 6 months ago

WIe hat es MUI gemacht? https://mui.com/material-ui/icons/

sapcc / juno

[UI] Remove hardcoded icons in Icon component #451

471