Support name-based dynamic icon imports
👋

It could be interesting to introduce a new `DynamicIcon` that dynamically imports and renders icons based on its name.


```tsx
const CategoryList: React.FC = () => {
  const { data: categories } = api.categories.list.useQuery();

  return (
    <div>
      {categories?.map((category) => <DynamicIcon name={category.icon} />)}
    </div>
  );
}
```


#### Use case

This is useful for scenarios where the icon name is not known ahead of time (i.e. comes from an external source — backend, api, etc.) and does not affect tree-shaking, unlike doing `import * as ...`.

#### Examples

- [`lucide-react`'s `DynamicIcon`](https://github.com/lucide-icons/lucide/blob/main/packages/lucide-react/src/DynamicIcon.ts)

#### Implementation

I think Lucide's implementation works quite good. They export a big lookup table of all icons and their respective dynamic import, which will be called when rendering the component.

They also accept a `fallback` component for when the icon hasn't loaded yet or if the name is invalid. Out of experience, it works quite well.

```ts
const dynamicImportMap = {
  "a-arrow-down": () => import('./icons/a-arrow-down.js'),
  "a-arrow-up": () => import('./icons/a-arrow-up.js'),
  // ...
}
```