Issues importing icons via Visual Studio Code

[phong-phuong]

Say I have an icon I create via:
<CloseIcon onClick={() => setClosed(true)} />

VS code is not able to suggest an import. I have to manually type it in:
import CloseIcon from '@suid/icons-material/Close';

Am I missing a dependency?

[juanrgm]

The component name is Close, not CloseIcon, but that it is not the issue.

The problem is that VSCode can't discover the component paths if they haven't at least one import.

Why not import all icon components (+2000) in a single file? See this comment #70 (comment).

Three-shaking is not the problem. The problem is TypeScript. When you import a file that contains other imports, all type definitions are loaded into the memory and since MUI/SUID is a large project, the IDE autocomplete and live reloading will be slowed down.

This problem is documented here.

Also, MUI is having a lot of performance issues when you are developing with TypeScript, so it is very important to avoid bringing the same problems to SUID.

This performance issue was reported to TypeScript team (microsoft/TypeScript#47137), but the issue keeps open.

Solutions? Create a single file with all module declarations:

declare module "@suid/icons-material/Close" {
  export = ...
}
...

This declaration file could be loaded from tsconfig.json:

"compilerOptions": {
  "typeRoots": ["@suid/icons-material/types"]
}

And this would help to VSCode to discover all icon components without scanning the entire icon folder.

I will investigate this solution and other possible solutions.

[phong-phuong]

Thanks for your reply. Coincidentally, I was looking into this yesterday, and I noticed that suid icons doesn't include the index.d.ts and index.js that @mui provided that exports all of the icons individually. I can understand that is a lot of work, so in the meantime, it is easier for devs to create a separate file to import and export their own icons.

e.g.

import CloseIcon from '@suid/icons-material/Close';
import FavoriteIcon from '@suid/icons-material/Favorite';

export { CloseIcon, FavoriteIcon };

[phong-phuong]

Actually, since this is a port of mui, the index.d.ts file for @uid/icons-material is almost identical to @mui version, (apart from the main import declaration). I think just by providing a similar index file export would be sufficient to get code editors to locate the icons.

i.e. index.d.ts file:

import SvgIcon from "@suid/material/SvgIcon";

type SvgIconComponent = typeof SvgIcon;

export const Abc: SvgIconComponent;
export const AbcOutlined: SvgIconComponent;
export const AbcRounded: SvgIconComponent;

... rest of the exports taken from @mui/icons-material/index.d.ts

[juanrgm]

Closed via a0fa4dd.

Example: https://stackblitz.com/edit/angular-htvruk?file=src%2FApp.tsx

Remember use the @suid/vite-plugin for optimizing the imports:

// vite.config.ts
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import suidPlugin from '@suid/vite-plugin';

export default defineConfig({
  plugins: [suidPlugin(), solidPlugin()],
  build: {
    target: 'esnext',
  },
});