Default string import for icons

[C3ntraX]

Is your feature request related to a problem? Please describe.
I don't want to import the big AllIcons.js module to reduce the package size. If I need an icon instead, I import it separately at each place I need the icon. However, the problem is that it is very difficult to determine whether imported icons are still used in the module. Or whether icons are even completely missing, which is why, in the best case, a warning appears in the console.

Describe the solution you'd like
Icons should have a default export. The export should be the represented icon-string. Let me demonstrate:

Current situation:
import "@ui5/webcomponents-icons/dist/accept";
<Icon name="accept" />

Problems:
The IDE cann´t track the usage of the import if the icons changes. This causes following problems

1. The import can be obsolete, which causes additional bundle size
2. The import can be missing, which causes in best case a warning the the console

Solution:
import accept from "@ui5/webcomponents-icons/dist/accept";
<Icon name={accept} />

or/and:

import { accept, decline } from "@ui5/webcomponents-icons";
<Icon name={accept} />
<Icon name={decline} />

MUI handels this the same way: https://mui.com/material-ui/icons/#main-content
They mentioned the bundle size as well, it should always be possible, to reduce the bundle size.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[MarcusNotheis]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[unazko]

Hello @SAP/ui5-webcomponents-team,

As this request is related to module import enhancements I've dispatched it to your component.

Best Regards,
Boyan Rakilovski

[C3ntraX]

Hi @ilhan007,

I still cant use the named imports in 1.4 because the type definitions for typescript are missing. Its only working in JS.

Can you pls fix this issue, or this change is useless for typescript projects.

Thanks