Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use Nerd Font css class names instead of hardcoding #192

Open
mochaaP opened this issue Jan 26, 2023 · 16 comments · May be fixed by #418
Open

Use Nerd Font css class names instead of hardcoding #192

mochaaP opened this issue Jan 26, 2023 · 16 comments · May be fixed by #418
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@mochaaP
Copy link

mochaaP commented Jan 26, 2023

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
Copy link
Member

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
Copy link
Author

mochaaP commented Jan 28, 2023

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
Copy link
Member

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

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

@mochaaP
Copy link
Author

mochaaP commented Jan 28, 2023

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

@alex-courtis
Copy link
Member

Thank you!

@vlada-dudr
Copy link
Contributor

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
Copy link
Author

mochaaP commented Feb 7, 2023

oh my.

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

Finii commented Mar 2, 2023

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
Copy link

Finii commented Mar 2, 2023

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.

image

@Finii
Copy link

Finii commented Mar 2, 2023

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
Copy link
Member

This is great, thank you @Finii

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

Finii added a commit to ryanoasis/nerd-fonts that referenced this issue Mar 12, 2023
@Finii
generate-css: Add codepoint to glyphnames.json
ab1921e 
[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 Finii mentioned this issue Mar 12, 2023
Merged
2 tasks
Finii added a commit to ryanoasis/nerd-fonts that referenced this issue Mar 12, 2023
@Finii
generate-css: Add codepoint to glyphnames.json
83b3d02 
[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
Copy link

Finii commented Mar 12, 2023

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
Copy link
Member

Unfortunately needed to breaking change the json file...

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

@gegoune gegoune mentioned this issue Mar 28, 2023
Closed
@mrjones2014
Copy link

Another option for this is to use nerdfix.

LNKLEO pushed a commit to LNKLEO/Nerd that referenced this issue Nov 24, 2023
@Finii
generate-css: Add codepoint to glyphnames.json
e173301 
[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 alex-courtis mentioned this issue Jan 14, 2024
Closed
@alex-courtis
Copy link
Member

Some work in progress: #376 (comment)

@alex-courtis 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
Open
Open
Merged
@alex-courtis
Copy link
Member

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

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

alex-courtis added a commit that referenced this issue Feb 25, 2024
@alex-courtis
feat(#192): :NvimWebDeviconsHiTest
dd7f743
alex-courtis added a commit that referenced this issue Feb 25, 2024
@alex-courtis
feat(#192): :NvimWebDeviconsHiTest
14a20fa
alex-courtis added a commit that referenced this issue Feb 25, 2024
@alex-courtis
feat(#192): :NvimWebDeviconsHiTest (#405)
0bb67ef 
* feat(#192): :NvimWebDeviconsHiTest

* feat(#192): :NvimWebDeviconsHiTest
@alex-courtis alex-courtis mentioned this issue Mar 10, 2024
Open
@alex-courtis alex-courtis linked a pull request Mar 17, 2024 that will close this issue
Open
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore(#192): generate from css class names nvim-tree/nvim-web-devicons
6 participants
@alex-courtis @mrjones2014 @vlada-dudr @Finii @mochaaP @gegoune