Atom: Make this possible in other text editors

[nfantone]

This is, by far, the most extensive, polished, good looking and well designed set of icons I've used across many IDEs, including ST3, vscode, Brackets and Atom.

Unfortunately, Atom is not the only text editor I used. I tend to leap over them depending on the technologies involved. And I'm sure many developers out there work in a similar fashion. So, I'd really _love_ to have these very icons on any sidebar/toolbar/tab-bar I work on.

How difficult would it be to make this project as abstract as needed for it to be compatible with other editors? Or maybe release different distributions/packages for different editors?

I'd really like to contribute and help on that, if a hand is needed.

[Alhadis]

Thanks for the kind words! :D

I'm not sure how those editors go about styling their GUIs, to be honest. You'd need to create different packages for those editors, I imagine. If they use CSS, you should be able to reuse most of this package's styling. The icons themselves are provided by a group of icon-fonts, one of which was created specifically for this package. Others are:

• Devicons
• MFizz
• Font Awesome
• GitHub's Octicons (bundled with Atom)

I've not used those editors you've mentioned, so I can't be of more help beyond that I'm afraid. :S

[nfantone]

Thanks for your quick answer, @Alhadis !

I believe the only editor working with CSS, AFAIK, is Atom. All others require icons to be in some image format or another (have a look, at this list of .png files in a Seti-UI icon theme for Sublime, for instance).

How hard would it be to "export" (I'm shyly quoting that) icons/fonts in this project to, say, transparent .pngs?

[Alhadis]

Yikes. Well, it'd be a pain to individually export _every_ image unless you found a way to automate it... :S IcoMoon has a feature to export every icon in PNG format, although you'd probably need to set each icon's colour manually (which, for over 700 icons, is a big ask).

[nfantone]

Have you work with that tool before? Is it free? Does it have an API I could, potentially call from a script to automate the process?

[Alhadis]

IcoMoon is free, yes. :) It's what we're currently using to generate our custom font (although I have plans to drop that in future in favour of a more streamlined approach).

As far as automation, no, I don't think so.

[nfantone]

I've been looking around and _it seems_ like VScode interface works just like Atom, by tweaking CSS files. However, it's (still) not exposed to users. There are some hacky attempts on making it customizable, though.

I'll see if I can open a PR at their repo to start a plea for support for this.

[ghost]

I'm working on ST3 port: https://github.com/oivva/zz-file-icons.

[Alhadis]

Good luck. 👍 Don't forget to include author attribution too.

[nfantone]

Hey, great news! So, @oivva how did you manage to use font icons in ST3? Did you export them in SVG?

[ghost]

@nfantone Currently ST3 doesn't support neither Font Icons nor SVG. I use the next process of adding an icon:

• Take SVG source of file-icons icon
• Resize it to 16x16
• Check if it looks good, if not make some tweaks to fit the pixel grid
• Via gulp builder change their color and rasterize to:
  
  
  
  • @1x - 32x32
  
  
  • @2x - 64x64
  
  
  • @3x - 96x96
  
  

I'll provide more details in the README later.

[Alhadis]

That entire pipeline could be reduced to a single one-liner... :S

Well, if you were running a Unix-like system at least... it'd be over in minutes.

[nfantone]

@oivva If you need a hand, I'll be happy to give one. I've looking for decent icons on ST for ages.

[nfantone]

When https://github.com/Microsoft/vscode/issues/8151 is closed, we could start implementing a VSCode version of this. 🎉

[ghost]

@nfantone Ok, 2.0.0 is ready to release. Currently an installation is only possible manually (see this), we're waiting for the merging this pull request. It will be released right after that.

If you need a hand, I'll be happy to give one. I've looking for decent icons on ST for ages.

I don't speak English very well. So I would greatly appreciate it if you could review the readme and the contributing notes.

Also I'm happy to announce that Boxy Theme and Material Theme bring the support of this package in the next releases. So you'll be able to choose what icons you want to use – provided by the theme or provided by the package.

Thanks :wink:

[nfantone]

@oivva Sure! Reviewing text right now.

[nfantone]

@oivva Done! See PR link above.

[praful-dhabekar]

Hey I'm new to package editing, I went https://atom.io/packages/atom-file-icons here to understand how I can change color of icon but I couldn't succeed. Can anyone tell me how to change file icon color. For instance there is JavaScript file and it's color is lite orange and I want to change it to dark orange. So how I can change the color.?

[Alhadis]

@praful-dhabekar Add this to your stylesheet:

~less
.js-icon::before{
color: #a35f27;
}
~

Replace #a35f27 with whatever colour you prefer.

The atom-file-icons package that you've linked to is a different package not related to this one.

[praful-dhabekar]

@Alhadis
Thanks it worked!

[Alhadis]

Alright, so here's what we're gonna do.

Every CSS rule, icon-font, and filetype mapping (config.cson) will be moved to a new repository in the @file-icons org. No new features will be developed here — v2.2.0 will focus solely on improving performance and fixing long-outstanding issues with heavy CPU/startup time.

Nobody will need to update their stylesheets, learn anything new, or even give a shit about what I'm writing at the moment. @file-icons/atom will consume the new library, shim the paths to the missing/relocated files, then call it a day. The only updates that will be made in this repo are dependency bumps and any Atom-specific fixes needed to keep things exactly as the way they are.right now for everybody using this package.

Gonna close this issue because the new line of (re-)development will have addressed @nfantone's original request exhaustively. Thanks to you all — past and present members of the Atom community alike — who helped make file-icons what it is. You are the reason the next "chapter" in this library's growth will continue. ❤️

[Alhadis]

For users who have forgotten or simply aren't aware, the spiffy-looking icons are barely half of what's behind this package. There is a massive (and smartly-structured) database of filetype and format-detection logic that remains unseen and largely unacknowledged. This is the stuff that needs to be detached from Atom and made available for the rest of the world.