CODEWITHSUNDEEP
visual-studio-codevscode-extensions
Lau
Lau

Reputation: 23

How do I use icons on a TreeItem in a VSCode extension when using webpack

I have troubles adding icons to a TreeItem in my VSCode extension. When I load the extension, the item has a blank space where the icon ought to be.

I have tried to mimic the nodeDependency example. I have the following in extension.ts:

class Foo extends TreeItem {
  iconPath = {
    light: path.join(__filename, '..', '..', 'resources', 'light', 'icon.svg'),
    dark: path.join(__filename, '..', '..', 'resources', 'dark', 'icon.svg')
  };
...
}

For context, part of my directory contents is

src
  extension.ts
resources
  dark
    icon.svg
  light
    icon.svg
dist
  extension.js
  extension.js.map

So I am trying to dot out of dist/extension.js and find the appropriate svg-file.

I use webpack to bundle the extension.

Upvotes: 1

Views: 445

Answers (1)

Lau
Lau

Reputation: 23

Webpack changes __filename, so your attempt to go to the resource directory fails.

Add the following to webpack.config.js to leave __filename unchanged:

module.exports = {
  [...]
  node: {
    __filename: false
  }
};

Upvotes: 1

Related Questions