Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use this package? #5

Open
peterschussheim opened this issue Mar 25, 2018 · 9 comments
Open

How to use this package? #5

peterschussheim opened this issue Mar 25, 2018 · 9 comments

Comments

@peterschussheim
Copy link

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
Copy link
Owner

dderevjanik commented Mar 25, 2018

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
Copy link
Owner

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
Copy link
Author

peterschussheim commented Mar 25, 2018

👋 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}`
  1. 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 👍

@dderevjanik
Copy link
Owner

Currenly, I'm doing it manually 😞 , but there's already an issue regarding this vscode-icons/vscode-icons#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
Copy link
Author

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
Copy link
Contributor

jens1o commented Mar 27, 2018

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
Copy link

JimiC commented Jun 24, 2018

@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
Copy link

JimiC commented Jul 17, 2018

@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
Copy link

zardoy commented Feb 15, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants