Use Nerd Font css class names instead of hardcoding

[mochaaP]

Background

Nerd Fonts plans to introduce a breaking change in v3.0.0:

Next Release Outlook

The v3.0.0 release will bring two bigger changes:

Material Design Icons

The Material Design Icons have to move codepoints. Historically we patch them in between F500 - FD46; but part of that range is needed for Chinese and other glyphs. With #773 and Plan 5+ of #365 their new home will be after F0001. And they grow considerably.

The v2.3.x release has both, the 'old' and the 'new' codepoints to enable you an easier transision. Please change already now your prompts and other uses to the new codepoints. Release v3.0.0 will finally drop the old codepoints (F500 - FD46).

Naming

Naming will also change. The name parts will move to places where they are customarily expected (e.g. weight and style comes last). This will fix some more problems. Probably we will drop the Complete monicker, as ... everyone uses the complete versions, it just takes precious space in the names. The details are not fixed yet, follow #1074 to keep up to date.

Hardcoding glyphs are very fragile to those changes. Moreover, if a user choose to use custom codepoint ranges (due to conflicts, etc.), it's a hassle to manually replace all icons in every plugin.

Solution

Fortunately, Nerd Fonts do have methods for getting glyphs via name, one via CSS class names, one being work in progress.

I suggest we could made the glyph table into a single .lua file and reference that and additionally, sync upstream with CI.

[alex-courtis]

That sounds fantastic, more robust references are always desirable.

Perhaps you could create a sample lua file with the table. We can plan this change from there.

[mochaaP]

I made a quick script that always returns the latest glyph data as JSON at https://nerd-fonts-glyph.deno.dev/. Hope that helps :-)

[alex-courtis]

That's great. I'll see what I can do with it.

Not sure how we'll handle 2/3 compatibility; any guidance?

[mochaaP]

Only MDI's glyph will be moved. Other icons are fine.

[alex-courtis]

Thank you!

[vlada-dudr]

I don't know if that helps as they seem to rename the icons from mdi to md. So even when relying on class name will break.

Last release (2.3) is old around 3 weeks and already features new codepoints, but is compatible. If you don't want to maintain two versions (maybe selectable via setup()) I'd think just tag last commit with <=2.2 support and start migration.

[mochaaP]

oh my.

[Finii]

What kind of css name database would you prefer? A json file? Plain text, blank separated? I guess the symbols directly as string (not as numeric value) would be best. Maybe both.

[Finii]

Following @mochaaP 's lead Nerd Fonts now has a json file with the glyph names and glyphs themselves.

https://github.com/ryanoasis/nerd-fonts/blob/-/glyphnames.json

The nf- is not prepended to the names, not sure if that would be better or not. Usually (imho) adding that does only make sense in CSS files, but tell me if not. Any input welcome.

Also add a the creation date and version to the file, so that one can more easily see if it is up to date or not.

[Finii]

Regarding the codepoint movement; I compiled a list of old-to-new codepoints to aid replacing...

https://github.com/ryanoasis/nerd-fonts/issues/1059#issuecomment-1404891287 (open 'details')

Regarding mdi becomes md in the names: At the moment we have both (at two different codepoints) and thus we need two separate names.

[alex-courtis]

This is great, thank you @Finii

Once everything is settled down we will add the new mechanisms.

[Finii]

Unfortunately needed to breaking change the json file... Now also the codepoint number not only the character is available. Multiple people said that would ease the workflow, and in fact I concede.

{
  "METADATA": {
    "website": "https://www.nerdfonts.com",
    "development-website": "https://github.com/ryanoasis/nerd-fonts",
    "version": "2.3.3",
    "date": "2023-03-12 18:51:14+00:00"
  },
  "cod-account": {
    "char": "",
    "code": "eb99"
  },
  "cod-activate_breakpoints": {
    "char": "",
    "code": "ea97"
  },

[alex-courtis]

Unfortunately needed to breaking change the json file...

Hey no worries; best to get it correct now...

[mrjones2014]

Another option for this is to use nerdfix.

[alex-courtis]

Some work in progress: https://github.com/nvim-tree/nvim-web-devicons/pull/376#issuecomment-1890843503

[alex-courtis]

A test command like :NvimTreeHiTest would be useful, showing:

• icon dark
• icon light
• css name
• color values