How to add an icon for certain extensions?

[Fenriuz]

How to add an icon for certain extensions?

I don't really know how to formulate my question, but with devicons I could do this let g: WebDevIconsUnicodeDecorateFileNodesPatternSymbols ['. * Test. * \. Js $'] = 'ﭧ'
And the result was the following:

How can I achieve the same result with this plugin?

[kyazdani42]

Hi, regexes are not supported at the moment, i think this could be added as a feature if it doesn't impact performance.

[Fenriuz]

I get it, it would be great if that feature was added.

[kyazdani42]

I agree, ill see when I have some time to implement this

[poetaman]

@kyazdani42 Is it possible to add a icon for a extension like .vimrc or .zshrc? Currently, they do not get applied icon/color of vim or zsh for some reason. Note: this is simpler than regex, it is hardcoded extension name.

[kyazdani42]

i'm not sure what's your question here @reportaman ? could you be a little bit more specific please ?

[luissimas]

Hi, I'm not sure if this is exactly what @Fenriuz means, but I was looking for a similar behaviour while using nvim-tree, and in the process of trying to implement it I may have found something that works.

Before:

After:

I couldn't find a good way of implementing it in nvim-web-devicons itself, the way that the get_icon function works seems fine, so I actually changed something in how nvim-tree handles the file extensions.

@kyazdani42, I see that nvim-tree uses the vim.fn.fnamemodify function with the ":e" modifier to get the file extension and then pass it to nvim-web-devicons, I think that this way of getting the file extension doesn't work very well when we have file extensions with multiple dots (like foo.test.js).

What I did was change the vim.fn.fnamemodify on nvim-tree with a lua pattern match that returns the full string after the first . occurence: string.match(name, "%.(.*)"). Now I can define the icons like this in nvim-web-devicons's setup function:

require("nvim-web-devicons").setup {
  override = {
    ["test.js"] = {
      icon = "ﭧ",
      color = "#cbcb41",
      name = "JavascriptTest"
    }
  },
  default = true
}

The problem is that I don't know if this will break anything in nvim-tree, so I would like to ask @kyazdani42's opinion on this.

This is far from being the regex-like feature, but I think it covers some use cases that are very common.

If it's ok I can submit a PR to nvim-tree and then add some icons and doc regarding this behaviour to this repo later.

[kyazdani42]

hi @luissimas, send a PR and i'll do a set of personnal test to ensure it's working as expected. It might break icon display for certain filenames but i'm not sure as i haven't seen your implementation yet :)

[Looooopy]

regexes would be a great feature. 👍

Like it is now we have to

• Rename a couple of files to match this naming convention to get nice icons

• Stick with default icons and keep our own naming convention.

I suppose I will stick with our naming for now until we get regexes in this library.

Great pull-request from @luissimas 🥇 that matches all dots in the end of the string.

Keep up the good work @kyazdani42 💯 and thanks for bringing us this library.

[qRoC]

For test files you can do:

local devicons = require "nvim-web-devicons"

local function get_ext(name)
  if name:find "^.+%.test%..+$" or name:find "^.+Test%..+$" or name:find "^.+_test%..+$" then
    return "test"
  end

  if name:find "^.+%.spec%..+$" or name:find "^.+Spec%..+$" or name:find "^.+_spec%..+$" then
    return "spec"
  end

  return name:match "^.*%.(.*)$" or ""
end

local get_icon = devicons.get_icon
devicons.get_icon = function(name, ext, opts)
  return get_icon(name, ext or get_ext(name), opts)
end

local get_icon_colors = devicons.get_icon_colors
devicons.get_icon_colors = function(name, ext, opts)
  return get_icon_colors(name, ext or get_ext(name), opts)
end

devicons.setup {
  override = {
    ["test"] = { icon = "ﭧ", color = "#cbcb41", name = "TestFile" },
    ["spec"] = { icon = "ﭧ", color = "#cbcb41", name = "SpecFile" },
  },
}

Example:

HelloTest.php
hello.test.js
hello_test.go

[y0nei]

Can this also be done for files that contain "env" in their name? Or generally user defined regex filters?
Eg.

.env-sample
.env_example
.env.production

[alex-courtis]

Unfortunately we don't have regex support.

You can add your own specific icons via API: https://github.com/nvim-tree/nvim-web-devicons#set-an-icon

[davmacario]

I had a similar issue but with files of the type .gitlab-ci.rules.yml, and ended up using a solution based on what @qRoC suggested:

local function get_special_ext(name)
    if name:find(".*%.gitlab%-ci.*%.yml") then -- Match <>.gitlab-ci<>.yml
         return "gitlab-ci.yml" -- Return `gitlab-ci.yml` as the extension
    end
    return nil
end

local devicons = require("nvim-web-devicons")
local get_icon = devicons.get_icon
devicons.get_icon = function(name, ext, opts)
      return get_icon(name, get_special_ext(name) or ext, opts)
end
local get_icon_colors = devicons.get_icon_colors
devicons.get_icon_colors = function(name, ext, opts)
      return get_icon_colors(name, get_special_ext(name) or ext, opts)
end

The thing is, files like .gitlab-ci.<something>.yml are actually assigned a non-default icon (they are correctly recognized as YAML files), so I had to swap the order of get_special_ext(name) and ext when calling get_icon and get_icon_colors.

This also requires that, by default, get_special_ext returns nil unless one of the rules I define works, so I can use the function to define only the special matching rules.

[davmacario]

Forgot to add - I also defined a "custom extension" (gitlab-ci.yaml) when calling require("nvim-web-devicons").setup() so that I can also catch files with the name <something>.gitlab-ci.yml. Then, I can just return gitlab-ci.yml as the extension to get the correct icon.

devicons.setup({
    -- [...]
    override_by_extension = {
	["gitlab-ci.yml"] = <my custom icon>
    },
})