Relative path in less files


Hello all,

This is my first exeriment with atom packages and front-end devellopement in general, so i apologies by advance if I was missing something obvious.

Here is my problem : i have an icon file inside my packages. It’s a unicolor icon, and i want to “paint” it on the fly, like an oction icon. Some here is what a achieve so far:

.package-name-status {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('file:///home/user/.atom/packages/package-name/styles/file.ico');

.package-name-active {
    background-color: @text-color;

.package-name-inactive {
    background-color: @text-color-subtle;

In my view I create a div with the package-name-status class and i switch between the active and inactive class to change the color and voila, i have my icon (in the status bar) who can change between the two color with a simple toggle command.

But i haven’t find a way to put a relative path for my icon, so my package is not portable.

So i post to see if anyone have a solution to this problem, or if you could think of a better way to achieve the same result.


In stylesheets, the atom:// scheme refers to the ~/.atom/packages directory. Relative navigation can be done from there:


Thanks a lot !

Is there something i miss in the atom doc, or reference in another place ?


I don’t recall right now. Please feel free to open an Issue on the repository to have it added.