How to use with default imports and typescript

[mbrevda]

Importing an icon as

import {PhoneIcon} from '@heroicons/react/24/solid';

causes TypeScript to scan all icon files (even if they don't end up in the bundle).

Importing an icon as

import PhoneIcon from '@heroicons/react/24/solid/PhoneIcon.js';

leads gives the error:

JSX element type 'PhoneIcon' does not have any construct or call signatures.ts(2604)
'PhoneIcon' cannot be used as a JSX component.
  Its type 'typeof import("[redacted]node_modules/@heroicons/react/24/solid/PhoneIcon")' is not a valid JSX element type.ts(2786)
import PhoneIcon

So how can an icon be imported with a default import?