ryanoasis
Switch to devicons/devicon
Description
Switch from https://github.com/vorillaz/devicons to https://github.com/devicons/devicon to get more relevant developer icons
Fixes: #615
Requirements / Checklist
- [x] Read the Contributing Guidelines
- [ ] I've discussed this with core contributors already. If not checked, I'm ready to accept this work might be rejected in favor of a different grand plan. Issue number where discussion took place: #xxx
- [ ] If this contains a font/glyph add its origin as background info below (e.g. URL)
- [ ] Verified the license of any newly added font, glyph, or glyph set. License is: xxx
What does this Pull Request (PR) do?
- Change upstream for the Devicons
- Introduce a codepoint guarantee (as long as icons are not dropped)
- Create new font from new upstream release with our custom codepoints
- Also introduces: Glyphs in patched fonts are named after their IDs
How should this be manually tested?
Any background context you can provide?
What are the relevant tickets (if any)?
Fixes: #1693
Screenshots (if appropriate or helpful)
For more screenshots see further down
Here a list of which icons will get an update. and which have been dropped in devicons (they have a -).
There are 95 icons dropped and 103 have updates.
# old name codepoint new file
bing_small E700 -
css_tricks E701 - !
git E702 git/git-plain.svg
bitbucket E703 bitbucket/bitbucket-original.svg
mysql E704 mysql/mysql-original.svg
streamline E705 -
database E706 - !
dropbox E707 - !
github_alt E708 -
github_badge E709 github/github-original.svg
github E70A -
wordpress E70B wordpress/wordpress-plain.svg
visualstudio E70C visualstudio/visualstudio-plain.svg
jekyll_small E70D jekyll/jekyll-plain.svg
android E70E android/android-plain.svg
windows E70F windows8/windows8-original.svg
stackoverflow E710 stackoverflow/stackoverflow-plain.svg
apple E711 apple/apple-original.svg
linux E712 linux/linux-plain.svg
appstore E713 -
ghost_small E714 ghost/ghost-original.svg
yahoo E715 -
codepen E716 codepen/codepen-original.svg
github_full E717 github/github-original-wordmark.svg
nodejs_small E718 nodejs/nodejs-plain.svg
nodejs E719 nodejs/nodejs-plain-wordmark.svg
hackernews E71A - !
ember E71B ember/ember-plain.svg (change from wordmark)
dojo E71C -
django E71D django/django-plain.svg (change from wordmark)
npm E71E npm/npm-original-wordmark.svg
ghost E71F ghost/ghost-original-wordmark.svg
modernizr E720 -
unity_small E721 unity/unity-plain.svg
rasberry_pi E722 raspberrypi/raspberrypi-plain.svg
blackberry E723 -
go E724 go/go-line.svg
git_branch E725 - !
git_pull_request E726 - !
git_merge E727 - !
git_compare E728 - !
git_commit E729 - !
cssdeck E72A -
yahoo_small E72B -
techcrunch E72C -
smashing_magazine E72D -
netmagazine E72E -
codrops E72F -
phonegap E730 -
google_drive E731 - !
html5_multimedia E732 - ?
html5_device_access E733 - ?
html5_connectivity E734 - ?
html5_3d_effects E735 - ?
html5 E736 html5/html5-plain.svg
scala E737 scala/scala-plain.svg
java E738 java/java-plain.svg
ruby E739 ruby/ruby-plain.svg
ubuntu E73A ubuntu/ubuntu-plain.svg
ruby_on_rails E73B rails/rails-plain.svg
python E73C python/python-plain.svg
php E73D php/php-plain.svg
markdown E73E markdown/markdown-original.svg
laravel E73F laravel/laravel-original.svg
magento E740 magento/magento-original.svg
joomla E741 -
drupal E742 drupal/drupal-plain.svg
chrome E743 chrome/chrome-plain.svg
ie E744 ie10/ie10-original.svg
firefox E745 firefox/firefox-plain.svg
opera E746 opera/opera-plain.svg
bootstrap E747 bootstrap/bootstrap-plain.svg
safari E748 safari/safari-plain.svg
css3 E749 css3/css3-plain.svg
css3_full E74A css3/css3-plain-wordmark.svg
sass E74B sass/sass-original.svg
grunt E74C grunt/grunt-line.svg
bower E74D bower/bower-line.svg
javascript E74E -
javascript_shield E74F -
jquery E750 jquery/jquery-plain.svg
coffeescript E751 coffeescript/coffeescript-original.svg
backbone E752 backbonejs/backbonejs-plain.svg
angular E753 angular/angular-plain.svg
jquery_ui E754 -
swift E755 swift/swift-plain.svg
symfony E756 -
symfony_badge E757 symfony/symfony-original.svg
less E758 less/less-plain-wordmark.svg
stylus E759 stylus/stylus-original.svg
trello E75A trello/trello-plain.svg
atlassian E75B -
jira E75C jira/jira-plain.svg
envato E75D -
snap_svg E75E -
raphael E75F -
chart E760 -
compass E761 -
onedrive E762 -
gulp E763 gulp/gulp-plain.svg
atom E764 atom/atom-original.svg
cisco E765 -
nancy E766 -
jenkins E767 jenkins/jenkins-plain.svg
clojure E768 clojure/clojure-line.svg
perl E769 perl/perl-plain.svg
clojure_alt E76A - ?
celluloid E76B -
w3c E76C -
redis E76D redis/redis-plain.svg
postgresql E76E postgresql/postgresql-plain.svg
webplatform E76F -
requirejs E770 -
opensource E771 -
typo3 E772 typo3/typo3-original.svg
uikit E773 -
doctrine E774 doctrine/doctrine-plain.svg
groovy E775 groovy/groovy-plain.svg
nginx E776 nginx/nginx-original.svg
haskell E777 haskell/haskell-plain.svg
zend E778 zend/zend-original.svg
gnu E779 -
yeoman E77A -
heroku E77B heroku/heroku-plain.svg
msql_server E77C -
debian E77D debian/debian-plain.svg
travis E77E travis/travis-plain.svg
dotnet E77F dot-net/dot-net-plain.svg
codeigniter E780 codeigniter/codeigniter-plain.svg
javascript_badge E781 javascript/javascript-plain.svg
yii E782 yii/yii-plain.svg
composer E783 composer/composer-line.svg
krakenjs_badge E784 krakenjs/krakenjs-plain.svg
krakenjs E785 -
mozilla E786 -
firebase E787 firebase/firebase-plain.svg
sizzlejs E788 -
creativecommons E789 - ?
creativecommons_badge E78A -
mitlicence E78B -
senchatouch E78C -
bugsense E78D -
extjs E78E -
mootools_badge E78F -
mootools E790 -
ruby_rough E791 -
komodo E792 -
coda E793 -
bintray E794 -
terminal E795 - ?
code E796 - ?
responsive E797 -
dart E798 dart/dart-plain.svg
aptana E799 -
mailchimp E79A -
netbeans E79B -
dreamweaver E79C dreamweaver/dreamweaver-plain.svg
brackets E79D -
eclipse E79E eclipse/eclipse-plain.svg
cloud9 E79F -
scrum E7A0 -
prolog E7A1 prolog/prolog-plain.svg
terminal_badge E7A2 - ?
code_badge E7A3 - ?
mongodb E7A4 mongodb/mongodb-plain.svg
meteor E7A5 meteor/meteor-plain.svg
meteorfull E7A6 meteor/meteor-plain-wordmark.svg
fsharp E7A7 fsharp/fsharp-plain.svg
rust E7A8 rust/rust-original.svg
ionic E7A9 ionic/ionic-original.svg
sublime E7AA -
appcelerator E7AB appcelerator/appcelerator-original.svg
asterisk E7AC -
aws E7AD amazonwebservices/amazonwebservices-plain-wordmark.svg
digital_ocean E7AE digitalocean/digitalocean-original.svg
dlang E7AF - !
docker E7B0 docker/docker-plain.svg
erlang E7B1 erlang/erlang-plain.svg
google_cloud_platform E7B2 -
grails E7B3 grails/grails-plain.svg
illustrator E7B4 illustrator/illustrator-plain.svg
intellij E7B5 intellij/intellij-plain.svg
materializecss E7B6 materializecss/materializecss-plain.svg
openshift E7B7 -
photoshop E7B8 photoshop/photoshop-plain.svg
rackspace E7B9 -
react E7BA react/react-original.svg
redhat E7BB redhat/redhat-plain.svg
scriptcs E7BC -
- E7BD -
- E7BE -
- E7BF -
- E7C0 -
- E7C1 -
- E7C2 -
- E7C3 -
sqllite E7C4 sqlite/sqlite-plain.svg
vim E7C5 vim/vim-plain.svg
I marked some with a - ! where I think it could be good to still keep the old/dropped icon because people might miss it.
Marked with - ? when I'm not sure if that should be a - !.
Here a visual of which icons got dropped upstream (i.e. were in Vorillaz but are not in Devicons/Devicon) marked with blue, and the existing icons updated to Devicons/Devicon.
Dropped icons often are in another set, so the impact is not too bad (e.g. Dropbox, Hackernews, ...) The other dropped icons are presumably not important nowadays or dead. :crossed_fingers:
All the vacant codepoints are now used to fill in new icons; so that we have no gaps and still all icons of Devicons v2.16.0:
Side by side:
And all:
Some svgs taken from Devicons/Devicon had a problem, that I fixed, and also added a non-wordmark awk icon that is used (Devicons has only wordmark icons for awk):
As I write this I already notice some more problems that I will fix and force-push away soon.
Ping to @snailedlt, discussions if needed can be better done here
Great work! If you want any of the icons to be fixed upstream (a.k.a in the devicons repo), feel free to make issues or PRs there and tag me in them. I'll prioritize those over others
List of dropped icons, their codepoints are reused for new icons. Amount: 88 icons No replacement suggestion: 48
| codepoint | name | comment | used by default of |
|---|---|---|---|
E700 |
bing_small | use md F00A4 |
|
E701 |
css_tricks | use fa F069 |
|
E705 |
streamline | use oct F472 |
|
E708 |
github_alt | use fa F113 |
|
E70A |
github | :red_circle:, use fa F113 |
|
E713 |
appstore | use fa F0BD |
|
E715 |
yahoo | :red_circle:, use fa F19E |
|
E71A |
hackernews | use fa F1D4 |
|
E71C |
dojo | :red_circle: | |
E720 |
modernizr | :red_circle: | |
E723 |
blackberry | use fa F117 |
|
E72A |
cssdeck | :red_circle: | |
E72B |
yahoo_small | use fa F19E |
|
E72C |
techcrunch | :red_circle: | |
E72E |
netmagazine | use md F0AAE |
|
E72F |
codrops | :red_circle:, maybe use one of the 'drops' | |
E730 |
phonegap | :red_circle: | |
E731 |
google_drive | use fa F2DF |
|
E732 |
html5_multimedia | :red_circle: | |
E733 |
html5_device_access | :red_circle: | |
E734 |
html5_connectivity | :red_circle: | |
E735 |
html5_3d_effects | :red_circle: | |
E741 |
joomla | use fa F1AA |
|
E74F |
javascript_shield | :red_circle: | |
E754 |
jquery_ui | :red_circle: | |
E756 |
symfony | no replacement, maybe use dev E757 |
|
E75B |
atlassian | updated icon use fa EF32 |
|
E75D |
envato | :red_circle: | |
E75E |
snap_svg | :red_circle: | |
E75F |
raphael | :red_circle: | |
E760 |
chart | numerous similar ones | |
E761 |
compass | :red_circle: | |
E762 |
onedrive | use md F03CA |
|
E765 |
cisco | :red_circle: | |
E766 |
nancy | :red_circle: | |
E76B |
celluloid | :red_circle: | |
E76C |
w3c | use fae E212 |
|
E76F |
webplatform | :red_circle: | |
E771 |
opensource | use logos F36C |
|
E773 |
uikit | use fa ED32 |
|
E77A |
yeoman | :red_circle: | |
E77C |
msql_server | :red_circle: | |
E785 |
krakenjs | use dev E784 |
|
E788 |
sizzlejs | :red_circle: | |
E789 |
creativecommons | use fa F25E |
|
E78A |
creativecommons_badge | :red_circle: | |
E78B |
mitlicence | :red_circle: | |
E78C |
senchatouch | :red_circle: | |
E78D |
bugsense | :red_circle: | |
E78E |
extjs | :red_circle: | |
E790 |
mootools | :red_circle: | |
E792 |
komodo | :red_circle: | |
E793 |
coda | :red_circle:, use some other leaf | |
E794 |
bintray | :red_circle: | |
E796 |
code | use fa F121 |
|
E797 |
responsive | use md F045E |
|
E799 |
aptana | :red_circle:, maybe use fa F013 |
|
E79A |
mailchimp | use fa EE67 |
|
E79B |
netbeans | use md F01A7 |
|
E79D |
brackets | use md F016A |
|
E79F |
cloud9 | :red_circle:, use some cloud | |
E7A0 |
scrum | :red_circle: | |
E7A2 |
terminal_badge | use fa F120 |
|
E7A3 |
code_badge | use cod EAE9 |
|
E7AC |
asterisk | :red_circle: | |
E7B2 |
google_cloud_platform | :red_circle: | |
E7B7 |
openshift | :red_circle: | |
E7B9 |
rackspace | :red_circle: | |
E7BC |
scriptcs | :red_circle: | |
E7BD |
- | :red_circle: | |
E7BE |
- | :red_circle: | |
E7BF |
- | :red_circle: | |
E7C0 |
- | :red_circle: | |
E7C1 |
- | :red_circle: | |
E7C2 |
- | :red_circle: | |
E7C3 |
- | :red_circle: |
Not dropped
| codepoint | name | comment | used by default of |
|---|---|---|---|
E706 |
database | use fa F1C0 |
nvim-devicons, eza, lazygit, vim-devicons |
E707 |
dropbox | use fa F16B |
nvim-devicons, lazygit, vim-devicons |
E72D |
smashing_magazine | :red_circle: | powerlevel10k |
E74E |
javascript | use seti E60C |
eza, lazygit, exa |
E76A |
clojure_alt | use seti E642 |
nvim-devicons, eza, lazygit, vim-devicons, exa |
E770 |
requirejs | :red_circle: | vim-devicons |
E779 |
gnu | maybe use logos F325 |
nvim-devicons, lazygit, exa, powerlevel10k |
E786 |
mozilla | :red_circle: | devicons |
E78F |
mootools_badge | :red_circle: | vim-devicons |
E791 |
ruby_rough | use md F0D2D |
nvim-devicons, lazygit, vim-devicoins |
E795 |
terminal | use oct F489 |
nvim-devicons, lazygit, vim-devicons |
E7AA |
sublime | use seti E696 |
nvim-devicons, eza, lazygit |
This looks amazing, great job!
Just few notes:
-
E771opensource -> you can use nf_linux_osiatF36C -
E779gnu -> even though it could be a good fit on font linux, already is a "popular" glyph that is widely used on lot of places for example lazygit, nvim-web-devicons (Vim/Neovim), powerlevel10k, eza, etc. I can already see some people opening issues because the glyph is not there. Search on GitHub. So, I would recommend to include it again on devicons repo in order to not change the used codepoint. @Snailedlt, do you think it's a good fit on devicons?
Thanks a lot @hasecilu !!
* `E771` _opensource_
Ah, thank you!
* `E779` _gnu_[...] is a "popular" glyph that is widely used on lot of places
I guess instead of adding it (back) to devicons/devicons I can just keep it, as the other few I already identified as 'must be kept' in the https://github.com/ryanoasis/nerd-fonts/tree/feature/update-devicons/src/glyphs/devicons/vorillaz directory (i.e. some git and dlang).
If you have any more we should keep, just tell me :-)
I change the entries in the table above.
Made this small script to create a nice regex and will git grep the repos you mentioned...
#!/usr/bin/bash
ICONS=( E700 E701 E705 E706 E707 E708 E70A E713 E715 E71A E71C E720 E723 E72A E72B E72C E72D E72E E72F E730 E731 E732 E733 E734 E735 E741 E74E E74F E754 E756 E75B E75D E75E E75F E760 E761 E762 E765 E766 E76A E76B E76C E76F E770 E771 E773 E779 E77A E77C E785 E786 E788 E789 E78A E78B E78C E78D E78E E78F E790 E791 E792 E793 E794 E795 E796 E797 E799 E79A E79B E79D E79F E7A0 E7A2 E7A3 E7AA E7AC E7B2 E7B7 E7B9 E7BC E7BD E7BE E7BF E7C0 E7C1 E7C2 E7C3)
printf "["
for i in "${ICONS[@]}"; do
printf "\u${i}"
done
printf "]"
for i in "${ICONS[@]}"; do
j=$(echo "${i}" | tr '[:upper:]' '[:lower:]')
printf "\\|%s\\|%s" "${i}" "${j}"
done
Above: regex.sh
Of course there are false positives etc, but I will collect some more data on which icons are used by default!
git grep "$(../regex.sh)" | sed "s/.*\($(../regex.sh)\).*/\1/" | LC_ALL=C sort | uniq
nvim-web-devicons:
e706 e707 e76a e779 e786 e791 e795 e7aa
eza:
e706 e74e e76a e7aa
lazygit:
e706 e707 e74e e76a e779 e791 e795 e7aa
powerlevel10k:
e72d e779
vim-webdevicons:
e706 e707 e76a e770 e78f e791 e795
exa:
e74e e76a e779
ohmyzsh:
none
@hasecilu
Thanks again for the valuable comment :green_heart:
I guess I will just keep all the icons that I found in some default config. Maybe you have more ideas for repos to examine?
In some moments I think maybe we should not drop any icon and just update and add new ones. Although some are really really obsolete :grimacing:
As the old Vorillaz icons are unsupported, checked all those (that we keep) and only dropbox needs an update:
Force push.
Current set of to-be-dropped icons
Compare with https://github.com/ryanoasis/nerd-fonts/pull/1691#issuecomment-2331614287
git grep "$(../regex.sh)" | sed "s/.*\($(../regex.sh)\).*/\1/" | LC_ALL=C sort | uniq
On lsd:
e74e e76a e779 e786 e795 e7aa
The only icon that don't have a replacement is mozilla but it seems is very outdated, here is new mozilla branding, on mozilla community seems to be some references to old logo, should the glyph be updated to have the m logo?
Click here to show/hide pictures
Thanks for digging deeper!
12 not dropped anymore icons: E706 E707 E72D E74E E76A E770 E779 E786 E78F E791 E795 E7AA
I think all of lsd's icons are covered. :+1:
Regarding Mozilla E786, it is used by nvim-devicons and lsd, lets check the purpose.
-
.xpi(nvim-devicons) Mozilla Cross Platform Install -
.mozilla(lsd)
These both look like - if they are still relevant which I am not sure - can live with an icon update. I just thought the dinosaur is possibly used for something unrelated. While I had no problem updating the dropbox logo I'm not so sure here.
I noticed the nginx current logo is not easy to identify on the terminal so I made a little PR to devicon with their "favicon" version: https://github.com/devicons/devicon/pull/2291
So, lets re-start this ;-)
Doing patched, noticing:
fontforge ../font-patcher --complete ../src/unpatched-fonts/NerdFontsSymbolsOnly/NerdFontsSymbolsNerdFontBlank.sfd -ext ttf --mono
WARNING: Scaled glyph E7BF wider than one monospace width (2128 / 2048 (overlap None))
WARNING: Scaled glyph E7C0 wider than one monospace width (2134 / 2048 (overlap None))
WARNING: Scaled glyph E7C2 wider than one monospace width (2204 / 2048 (overlap None))
fontforge ../font-patcher --complete ../src/unpatched-fonts/CascadiaCode/Regular/CascadiaCode-Regular-vtt.ttf --mono
WARNING: Scaled glyph E7BD wider than one monospace width (1393 / 1200 (overlap None))
WARNING: Scaled glyph E7BE wider than one monospace width (1386 / 1200 (overlap None))
WARNING: Scaled glyph E7BF wider than one monospace width (1471 / 1200 (overlap None))
WARNING: Scaled glyph E7C0 wider than one monospace width (1475 / 1200 (overlap None))
WARNING: Scaled glyph E7C1 wider than one monospace width (1410 / 1200 (overlap None))
WARNING: Scaled glyph E7C2 wider than one monospace width (1524 / 1200 (overlap None))
WARNING: Scaled glyph E7C3 wider than one monospace width (1387 / 1200 (overlap None))
Caskaydia Nerd Font Mono
Fixed
The scaling...
Mono is of course all maxed out in the 'cell'.
Here an image of the Nerd Font variant. Some icons are a bit smaller, some are bigger, but mostly not by much.
The main reason is that the new icons are much more consistent in size; while the old icons spanned from rather small to very big. Now everything is more or less lined up:
Left: old icons, right: updated icons
Note how extraordinary big JS was before, while Ionic is rather small in comparison to all others. In the new font JS got smaller and Ionic bigger, so now they are comparably big.
@Finii what do you think on the change I proposed above for nginx glyph? Could be associated to nginx.conf file and would be easier to identify.
Ah it's you @hasecilu (you changed your avatar), yes, will check. Try to get this bloody release out asap ;-) Well, at least working continuously on it.
A problem I have with modifying the icons here relative to upstream is of course ... it diverges then.
But I will look later and keep you updated :+1:
Icon additions is the next thing after this PR, the the fonts, then release :grimacing:
Script to come up with a changed icons NAME list from a codepoint list in a file:
$ for f in `cat ~/dropped`; do
echo "$f $(jq -r "to_entries[] | select(.value.code // \"\"|ascii_upcase == \"$f\")|.key" glyphnames.json)"
done
nginx
Hmm, they have rounded corners, also the distance from the N to the border of the hexaeder seems different.
... using their original icon thing to come up with an improved icon:
Updated topmost description, well, except for the new nginxcccccbnkbr icon, but I do not want to do the images again :grimacing:
Ready to roll now.
Can you list this is a breaking change in the release notes please. I was affected, and it wasn't immediately clear as to why.
What would you suggest? The codepoints as list, or including the names? I think it can be too bulky and ppl often do not know the codepoints let alone the names. That's why I thought an image would be best, but that can only be placed here.
Of course I could add a more explicit warning :thinking: Let me know what is most useful.
What would you suggest? The codepoints as list, or including the names? I think it can be too bulky and ppl often do not know the codepoints let alone the names. That's why I thought an image would be best, but that can only be placed here.
Of course I could add a more explicit warning :thinking:
Let me know what is most useful.
As long as the words include "breaking change" and reference the link to this PR somewhere, I think it's fine. Otherwise it's hard to know where to start looking for migration steps.
@XavierChanth Thanks for the feedback! I changed the changelog accordingly:
- master https://github.com/ryanoasis/nerd-fonts/commit/be4fa5a72b7fec3200a296538eb3fef885b1593f -> https://github.com/ryanoasis/nerd-fonts/blob/master/changelog.md
- gh-pages 148c61dea5d9b21f38d93d9dc85912b7f5198eb1 -> https://www.nerdfonts.com/releases
- release https://github.com/ryanoasis/nerd-fonts/releases/tag/v3.3.0
@XavierChanth Thanks for the feedback! I changed the changelog accordingly:
master https://github.com/ryanoasis/nerd-fonts/commit/be4fa5a72b7fec3200a296538eb3fef885b1593f -> https://github.com/ryanoasis/nerd-fonts/blob/master/changelog.md
gh-pages 148c61dea5d9b21f38d93d9dc85912b7f5198eb1 -> https://www.nerdfonts.com/releases
release https://github.com/ryanoasis/nerd-fonts/releases/tag/v3.3.0
Thanks for making the change!