How to use this package?

[peterschussheim]

How do consumers of this package actually render the icon desired? I've spent about an hour trying to get something working but it seems this doesn't include and SVG files or provide an API to lookup the correct icon using the result of getIconForFile(file).

Am I using this incorrectly?

Thanks

[dderevjanik]

Hi,

thank you very much for filing an issue. This extension is inspired by file-icon-js. vscode-icons-js only returns name of correspondingsvg file.

For example getIconForFile('main.cpp'); will return file_type_cpp.svg and you can use it like this: <img src="file_type_cpp.svg"/> or as template <img src={getIconForFile('main.cpp')}/>

In order to make this all works, you have to download all icons from vscode-icons/icons and put them somewhere on your server.

EDIT: github-vscode-icons for "real-world" example

[dderevjanik]

I created repo with an example how to use vscode-icons-js (it will dynamically change icon based on input's filename), please look at https://github.com/dderevjanik/vscode-icons-js-example

or directly to source code: https://github.com/dderevjanik/vscode-icons-js-example/blob/master/src/Index.tsx

[peterschussheim]

:wave: Thanks for the fast response. In your chrome extension, how are you handling updates to vscode-icons/icons? Automated?

EDIT: thanks for posting that example, it is very helpful!

My use case (or what i'd like it to look like) is as follows:

1. determine correct icon using getIconForFile('main.cpp')
2. build a path using the result from step 1:

const path = `../../{iconForFile}`

3. load the SVG as needed

I am using this approach currently and it works, however, i'd prefer to have a more programmatic way to access the most current icon.

Nice work BTW :+1:

[dderevjanik]

Currenly, I'm doing it manually :disappointed: , but there's already an issue regarding this https://github.com/vscode-icons/vscode-icons/issues/1437 to automatically update icons and icons.json (maps filename to an icon).

Yeah, I'll try to make it in a more programmatic way as you pointed. Thank you very much

[peterschussheim]

Have you had a chance to talk with JimiC about this (since PR #1470 was merged in vscode-icons)? Sounds like he has some knowledge on their build process. Anyways, thanks again!

[jens1o]

In general, it's easier to talk with somebody instead of over somebody. ;) Just drop in a question in that PR or open an issue.

(Member of the vscode-icons Team)

[JimiC]

@dderevjanik I'm going to have a look at this in the next days and see what can be done to automate the entire publishing process.

[JimiC]

@dderevjanik I looked into this and I was compelled to write a new project providing an API for vscode-icons that will be maintained by us. I have stumbled upon the issue of how to support the language id. Looking at your code I saw that you are partially supporting those and by using the defaultExtension attribute, which was not designed to be used in this way. Until I can figure out a practical way to support the language id I'm holding back.

[zardoy]

Hm, so did you write a project?

I was inspired with @iconify-icons/vscode-icons package

and published https://github.com/zardoy/vscode-icons-ts to npm with icons included. 100% extracted and generated automaitally.