Unble to dynamic import icons .mjs extensions
This always throws errors when try to dynamicly import, i think its because of the files extesion .mjs but cant figure it out, already tried cra clean projects, vite clean projects etc  

```
import { Suspense, lazy } from "react";
import "./styles.css";

function IconTest (props: any) {
  const { icon } = props;

  const IconComponent = lazy(() =>
    import(`@phosphor-icons/react/dist/csr/${icon}`).then((r) => {
      console.log("r", r);
      return { default: r[icon] ? r[icon] : () => null };
    })
  );

  // check suspense needed
  return (
    <span role="img" className="test-icon">
      <Suspense fallback="...">
        <IconComponent />
      </Suspense>
    </span>
  );
}

// HOW WOULD WE USE IT:
export default function App() {
  return (
    <>
      <IconTest icon="Infinity" />
      <IconTest icon="Activity" />
      <IconTest icon="AddressBook" />
    </>
  );
}
```


![image](https://github.com/phosphor-icons/react/assets/35630927/f246da43-b9a1-4f74-91da-5ea92ce138f1)

is csr the wrong folder for dynamic import?
very simple to replicate
```
yarn create react-app my-app --template typescript
yarn add @phosphor-icons/react
add the dynamic import to some icon
yarn start
```
already tried with other libs example remixicon-react works fine, cant seem to find whats the problem with phosphor package for it to dont work

for now importing this way  but the bundle size and app startup its huge, page loading like 40mb download because its importing all existing icons...
```
 import(`@phosphor-icons/react`).then
```