Use Nerd Font css class names instead of hardcoding #192

mochaaP · 2023-01-26T15:20:17Z

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.

The text was updated successfully, but these errors were encountered:

alex-courtis · 2023-01-28T04:27:23Z

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 · 2023-01-28T04:38:49Z

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 · 2023-01-28T05:23:53Z

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

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

mochaaP · 2023-01-28T05:44:21Z

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

alex-courtis · 2023-01-28T22:42:58Z

Thank you!

vlada-dudr · 2023-02-07T11:48:12Z

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 · 2023-02-07T12:02:14Z

oh my.

Finii · 2023-03-02T08:37:35Z

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 · 2023-03-02T12:01:50Z

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 · 2023-03-02T12:12:39Z

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

ryanoasis/nerd-fonts#1059 (comment) (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 · 2023-03-04T02:10:17Z

This is great, thank you @Finii

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

[why] Just having the characters themselves as data for the name is convenient in some cases; but sometimes the codepoint is also nice. And it certainly improves the human interaction / check of the file. [how] Include the character and the codepoint in the glyph-name data. This is a breaking change. But given that the json file is rather new I believe we can get away with it. Sorry for the inconvenience for all the early adaptors that already use the old/previous format. But now we are more future proof and can add even more data without breaking old json code. Related: #1140 kovidgoyal/kitty#2972 chrisbra/unicode.vim#39 #448 nvim-tree/nvim-web-devicons#192 Signed-off-by: Fini Jastrow <[email protected]>

Finii · 2023-03-12T20:35:59Z

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 · 2023-03-13T04:34:15Z

Unfortunately needed to breaking change the json file...

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

mrjones2014 · 2023-03-28T14:25:22Z

Another option for this is to use nerdfix.

[why] Just having the characters themselves as data for the name is convenient in some cases; but sometimes the codepoint is also nice. And it certainly improves the human interaction / check of the file. [how] Include the character and the codepoint in the glyph-name data. This is a breaking change. But given that the json file is rather new I believe we can get away with it. Sorry for the inconvenience for all the early adaptors that already use the old/previous format. But now we are more future proof and can add even more data without breaking old json code. Related: ryanoasis#1140 kovidgoyal/kitty#2972 chrisbra/unicode.vim#39 ryanoasis#448 nvim-tree/nvim-web-devicons#192 Signed-off-by: Fini Jastrow <[email protected]>

alex-courtis · 2024-01-29T03:33:00Z

Some work in progress: #376 (comment)

alex-courtis · 2024-02-18T22:16:25Z

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

icon dark
icon light
css name
color values

* feat(#192): :NvimWebDeviconsHiTest * feat(#192): :NvimWebDeviconsHiTest

gegoune added enhancement New feature or request help wanted Extra attention is needed labels Feb 14, 2023

Finii mentioned this issue Mar 12, 2023

generate-css: Add codepoint to glyphnames.json ryanoasis/nerd-fonts#1147

Merged

2 tasks

gegoune mentioned this issue Mar 28, 2023

Run nerdfix to replace deprecated nerdfont icons #242

Closed

alex-courtis mentioned this issue Jan 14, 2024

fix: update ts, cts, mts and tsconfig.json icon #376

Closed

alex-courtis changed the title ~~Proposal: Use Nerd Font css class names instead of hardcoding~~ Use Nerd Font css class names instead of hardcoding Jan 29, 2024

This was referenced Jan 29, 2024

Consolidate Default Icon Set: Seti #391

Open

Material Icon Set #392

Open

revert: back to seti: js, cjs and mjs #377

Merged

alex-courtis added a commit that referenced this issue Feb 25, 2024

feat(#192): :NvimWebDeviconsHiTest

dd7f743

alex-courtis added a commit that referenced this issue Feb 25, 2024

feat(#192): :NvimWebDeviconsHiTest

14a20fa

alex-courtis added a commit that referenced this issue Feb 25, 2024

feat(#192): :NvimWebDeviconsHiTest (#405)

0bb67ef

* feat(#192): :NvimWebDeviconsHiTest * feat(#192): :NvimWebDeviconsHiTest

alex-courtis mentioned this issue Mar 10, 2024

refactor: rewrite generator #414

Open

alex-courtis linked a pull request Mar 17, 2024 that will close this issue

chore(#192): generate from css class names #418

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Nerd Font css class names instead of hardcoding #192

Use Nerd Font css class names instead of hardcoding #192

mochaaP commented Jan 26, 2023

Next Release Outlook

Material Design Icons

Naming

alex-courtis commented Jan 28, 2023

mochaaP commented Jan 28, 2023

alex-courtis commented Jan 28, 2023

mochaaP commented Jan 28, 2023

alex-courtis commented Jan 28, 2023

vlada-dudr commented Feb 7, 2023

mochaaP commented Feb 7, 2023

Finii commented Mar 2, 2023

Finii commented Mar 2, 2023

Finii commented Mar 2, 2023

alex-courtis commented Mar 4, 2023

Finii commented Mar 12, 2023

alex-courtis commented Mar 13, 2023

mrjones2014 commented Mar 28, 2023

alex-courtis commented Jan 29, 2024

alex-courtis commented Feb 18, 2024

Use Nerd Font css class names instead of hardcoding #192

Use Nerd Font css class names instead of hardcoding #192

Comments

mochaaP commented Jan 26, 2023

Background

Next Release Outlook

Material Design Icons

Naming

Solution

alex-courtis commented Jan 28, 2023

mochaaP commented Jan 28, 2023

alex-courtis commented Jan 28, 2023

mochaaP commented Jan 28, 2023

alex-courtis commented Jan 28, 2023

vlada-dudr commented Feb 7, 2023

mochaaP commented Feb 7, 2023

Finii commented Mar 2, 2023

Finii commented Mar 2, 2023

Finii commented Mar 2, 2023

alex-courtis commented Mar 4, 2023

Finii commented Mar 12, 2023

alex-courtis commented Mar 13, 2023

mrjones2014 commented Mar 28, 2023

alex-courtis commented Jan 29, 2024

alex-courtis commented Feb 18, 2024