vscode-elements / elements

Web component library for developing Visual Studio Code extensions
https://vscode-elements.github.io
MIT License
148 stars 27 forks source link

It's not clear how to use the `IconType` #130

Closed Mopsgamer closed 9 months ago

Mopsgamer commented 9 months ago

The documentation mentions type IconType = 'themeicon' | 'image', but it doesn't explain how to use it. I would be interested in how to use the icon theme that the user has selected (file and folder icons: Minimal, Seti, and themes that come with plugins), to display the same file trees. It would be nice to see these explanations in the updated documentation.

bendera commented 9 months ago

Thanks for pointed it out. It's an internal type, I copied it accidentally to the docs. icons property is used to defining a codicon, iconUrls is used for custom icons. For example:

// codicons
const treeData = [
  {
    label: 'example.ts',
    icons: {
      branch: 'folder',
      leaf: 'file',
      open: 'folder-opened',
    }
  }
];
// custom icons
const treeData = [
  {
    label: 'example.ts',
    iconsUrls: {
      branch: '/assets/icons/folder.svg',
      open: '/assets/icons/folder.expanded.svg',
      leaf: '/assets/icons/typescript.svg',
    }
  }
];

Both tree data example contain a single leaf element. If a tree item is leaf, the branch and the open icons will be ignored.

Mopsgamer commented 9 months ago

The problem is that there are not only custom icons and codicon icons. I also suspect the existence of theme icons.

I would like to change icons dynamically depending on the user's theme, rather than using presets. I mean I can't access Seti icons using codicons.

I expect the theme icons to be provided directly by VS Code, and currently, I believe that accessing them is not possible, right?

bendera commented 9 months ago

Sorry, I didn't read your previous comment carefully enough. Yes, I'm pretty sure the theme icon urls cannot be accessible in the extension API.