Improved rendering of Seti icons

[gmckeown]

• VSCode Version: 1.10.2 and 1.11.0 Insider build (b9857a)
• OS Version: Windows 10 Build 14393.693

Steps to Reproduce:

1. Enable vs-seti icon set
2. Create a file with .sh extension (for example)

Icon is simply a grey square; the Seti icon set for Atom suggests there should be some detail displayed.

Here's an enlarged comparison with VSCode on top and the version from the Seti summary below:

And here's a rendering of the original Seti shell.svg using Inkscape:

Loading the seti.woff file (in eval version of FontCreator) shows the icons to be poorly rendered at larger sizes as well, which I assume is due to a problem converting from the SVGs to WOFF?

A selection of the icons as viewed in FontCreator:

Here's the C# Icon from the WOFF:

And here's the same icon from the original SVG (viewed in Inkscape):

[gmckeown]

Digging a bit further, I assume you've used the seti.woff file from the atom-seti-icons project, which in turn takes them from the seti-ui project.

Seti UI uses a script that converts the good-looking SVG icons into font files, and it appears to be there that the problem occurs. This combines the icons and outputs them into five font files (seti.eot, seti.svg, seti.ttf, seti.woff, and seti.woff2).

Both the TTF and WOFF files have the disfigured glyphs. I don't have tools to open the WOFF2 and EOT formats directly. The seti.svg font file opens in FontForge and shows most of the icons correctly -- CSV and Shell are still missing their detail.

So, ultimately, this seems to be an issue with the conversion of the source SVG icons into a font-file.

[aeschli]

@gmckeown Thanks for the analysis. We're take the font directly from the seti-ui project.
I move the issue there in the hope they can improve the SVG to font conversion.

[aeschli]

This issue was moved to jesseweed/seti-ui#401

[gmckeown]

I've got a pull request in with Seti UI to resolve this issue -- fix for VS Code I expect will be an updated seti.woff and changes to vs-seti-icon-theme.json to account for some additional icons. With Atom, I was able to just drop the new fonts into the theme's package folder and everything seems to work, but with VSCode, I get this strangeness:

Any idea how I might correct this?

Updated font can be found in the pull request if you wish to test for yourself: jesseweed/seti-ui#406

[gmckeown]

Ignore the above. The mis-alignment was due to an error in one of the source icons that was throwing off the font size normalisation. Seems to all be working in Atom now, and initial tests with VSCode look promising. My assumption is that you'll pull the updated WOFF from the Seti UI project once it's merged. A small preview below :)

[aeschli]

@gmckeown Looks great, thanks for your work! I hope your changes get adopted soon so I can pick them up.

[aeschli]

@gmckeown I updated the Seti font containing your fixes. Thanks a lot!

[TheFluffyOne]

Good stuff! If you do see any vertical alignment issues with the updated font -- per #22667 (comment) above -- there's a separate pull request to address this: jesseweed/seti-ui#409. When the Insiders build updates to include your commit I'll test on the machine that had the issue before.

[aeschli]

Yes, I had to manually patch seti-ui to get the vertical alignment correct on windows. Thanks for creating a pull request for that!

[TheFluffyOne]

@aeschli Today's Insider build is looking great on the Win10 notebook on which I previously saw the alignment issues :). I'll add a comment here if/when my fix is pulled into Seti-UI.

[gmckeown]

Sorry, just realised I left myself logged in to an old account I was in the process of retiring! Previous comments were from me :)

[gmckeown]

@aeschli, I don't see mention of the updated icons in current Insiders release notes -- will this make it into 1.12.0?

[aeschli]

It's in there, sorry. I'll add a note.

[aeschli]

I added a thank you note to the release notes! Thanks again @gmckeown !

[gmckeown]

Awesome, cheers!