Need help with atom?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

file-icons
1.1K Stars 244 Forks MIT License 1.7K Commits 11 Opened issues

Description

Atom file-specific icons for improved visual grepping.

Services available

!
?

Need anything else?

Contributors list

# 11,883
CSS
Svelte
q
Atom
1129 commits
# 151,529
Less
Atom
Sass
rails5
119 commits
# 50,419
pcre
Perl
Atom
blog-pl...
11 commits
# 23,365
Clojure
Clojure...
Atom
React
10 commits
# 125,010
Less
Atom
HTML
portain...
10 commits
# 282,010
Less
Atom
Package...
Perl
7 commits
# 303,993
C++
Less
Atom
portage
7 commits
# 124,542
Rails
high-si...
Atom
React
6 commits
# 34,270
Algolia
Angular
jetpack
nextjs
6 commits
# 224,510
PHP
Atom
Crystal
lsp
6 commits
# 478,230
JavaScr...
Less
Atom
5 commits
# 480,425
JavaScr...
Less
Atom
5 commits
# 270,931
Less
Atom
elastic...
Groovy
4 commits
# 336,071
Less
Atom
PHP
Gulp
4 commits
# 498,053
JavaScr...
Less
Atom
4 commits
# 8,922
Git
Atom
HTML
C#
4 commits
# 96,028
Babel
cropper...
image-c...
Less
4 commits
# 156,301
async-f...
Less
Atom
Node.js
4 commits
# 29,611
C#
Express
diagnos...
Atom
4 commits
# 337,223
Less
Atom
lightbo...
CSS
4 commits

File Icons

Build status: TravisCI Latest package version

File-specific icons in Atom for improved visual grepping.

Icon previews

Supports the following core packages:

An API is offered for packages not listed above. See the integration steps for more info.

Installation

Open SettingsInstall and search for

file-icons
.

Alternatively, install through command-line:

apm install --production file-icons

Customisation

Everything is handled using CSS classes. Use your stylesheet to change or tweak icons.

Consult the package stylesheets to see what classes are used:

Icon reference

Examples

Resize an icon

.html5-icon:before{
    font-size: 18px;
}

// Resize in tab-pane only: .tab > .html5-icon:before{ font-size: 18px; top: 3px; }

Choose your own shades of orange

.dark-orange   { color: #6a1e05; }
.medium-orange { color: #b8743d; }
.light-orange  { color: #cf9b67; }

Bring back PHP's blue-shield icon

.php-icon:before{
    font-family: MFizz;
    content: "\f147";
}

Assign icons by file extension

The following examples use attribute selectors to target specific pathnames:

.icon[data-name$=".js"]:before{
    font-family: Devicons;
    content: "\E64E";
}

Assign icons to directories

.directory > .header > .icon{
    &[data-path$=".atom/packages"]:before{
        font-family: "Octicons Regular";
        content: "\f0c4";
    }
}

Troubleshooting

I see this error after installing:

"Cannot read property 'onDidChangeIcon' of undefined"

A restart is needed to complete installation. Reload the window, or restart Atom.

If this doesn't help, please file an issue.

Installation halts with an
npm
error:

npm ERR! cb() never called!

There might be a corrupted download in your local cache. Delete

~/.atom/.apm
, then try again:
rm -rf ~/.atom/.apm
apm install --production file-icons

An icon has stopped updating:

It's probably a caching issue. Do the following:

  1. Open the command palette: Cmd/Ctrl + Shift + P
  2. Run
    file-icons:clear-cache
  3. Reload the window, or restart Atom

Ruby files are showing the wrong font:

If

language-ethereum
is installed, remove it. This is a known issue with the package, which is no longer maintained. For Solidity support, use
linter-solidity
or
language-solidity
instead.

If

language-ethereum
isn't installed, please follow these steps and file an issue.

The tree-view's files are borked and look like this:

If you haven't restarted Atom since upgrading to File-Icons v2, do so now.

If restarting doesn't help, your stylesheet probably needs updating. See below.

My stylesheet has errors since updating:

As of v2.0, classes are used for displaying icons instead of mixins. Delete lines like these from your stylesheet:

[email protected] "packages/file-icons/styles/icons";
[email protected] "packages/file-icons/styles/items";
[email protected]{pane-tab-selector},
.icon-file-directory {
    &[data-name=".git"]:before {
-       .git-icon;
+       font-family: Devicons;
+       content: "\E602";
    }
}

Instead of

@pane-tab…
variables, use
.tab > .icon[data-path]
:
[email protected],
[email protected],
[email protected] {
+.tab > .icon {
    &[data-path$=".to.file"] {

}

}

These CSS classes are no longer used, so delete them:

-.file-icons-force-show-icons,
-.file-icons-tab-pane-icon,
-.file-icons-on-changes

It's something else.

Please file an issue. Include screenshots if necessary.

Integration with other packages

If you're a package author, you can integrate File-Icons using Atom's services API.

First, add this to your

package.json
file:
"consumedServices": {
    "file-icons.element-icons": {
        "versions": {
            "1.0.0": "consumeElementIcons"
        }
    }
}

Secondly, add a function named

consumeElementIcons
(or whatever you named it) to your package's main export:
let addIconToElement;
module.exports.consumeElementIcons = function(func){
    addIconToElement = func;
};

Then call the function it gets passed to display icons in the DOM:

let fileIcon = document.querySelector("li.file-entry > span.icon");
addIconToElement(fileIcon, "/path/to/file.txt");

The returned value is a

Disposable
which clears the icon from memory once it's no longer needed:

const disposable = addIconToElement(fileIcon, "/path/to/file.txt");
fileIcon.onDestroy(() => disposable.dispose());

NOTE: Remember to remove any default icon-classes before calling the service handler!

 let fileIcon = document.querySelector("li.file-entry > span.icon");
+fileIcon.classList.remove("icon-file-text");
 const disposable = addIconToElement(fileIcon, "/path/to/file.txt");

Backers

If you enjoy these icons, help support the project by becoming a backer. Huge thanks to our current backers for their generous support:

Justin Ireland Tipe Triplebyte TakeShape

Acknowledgements

v1
was originally based on sommerper/filetype-color.
v2
was completely rewritten. Both versions owe their success to innumerable contributions from the Atom community.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.