File Icons

File-specific icons in Atom for improved visual grepping.

Supports the following packages:

• tree-view
• tabs
• fuzzy-finder
• find-and-replace
• archive-view

Installation

Open Settings → Install and search for file-icons.

Alternatively, install through command-line:

apm install 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:

• Icons: styles/icons.less
• Colours: styles/colours.less
• Fonts: styles/fonts.less

Icon reference

• File-Icons
• FontAwesome 4.7.0
• Mfizz
• Devicons

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:

   .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.

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

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.

The tree-view keeps opening by itself when opening a project window:

1. Open the dev-tools: View → Developer → Toggle Developer Tools
2. Click the Console tab
3. Run the following line, then restart Atom:

atom.config.set("file-icons.revealTreeView", false);

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:

-@import "packages/file-icons/styles/icons";
-@import "packages/file-icons/styles/items";
-@{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]:

-@pane-tab-selector,
-@pane-tab-temp-selector,
-@pane-tab-override {
+.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");

Acknowledgements

Originally based on sommerper/filetype-color, but now sporting a shiny new file-icons API in v2 thanks to Alhadis! Also thanks to all the contributors