Pixel perfect icons at 16px #2226
Conversation
makes around 240 file icons and all folder icons to look sharper at 16px, which is the default size of file icons in vscode
changes the svg paths of the generated icons (default folder, root folder and file) to look sharper at 16px
PreviewThank you for creating a pull request. This preview shows you how your changes will look on the different themes: You can find more information how to contribute in the contribution guidelines. |
|
That was a large preview, mr github actions 😂 |
PreviewThank you for creating a pull request. This preview shows you how your changes will look on the different themes: You can find more information how to contribute in the contribution guidelines. |
PreviewThank you for creating a pull request. This preview shows you how your changes will look on the different themes: You can find more information how to contribute in the contribution guidelines. |
Merge SuccessfulThanks for your contribution! 🎉 The changes will be part of the upcoming update on the marketplace. |
|
Why does the preview not show a light theme icon for npm? 🤔 |
Good question, didn't notice until now 😅 This was ported from a clone of this project that I use with my own additions and I switch between light and dark pretty often. I'm pretty sure the icon was working there (in vscode). Will look into it later to see if there's an issue with the icon itself or with the action that creates the preview image. Thanks for noticing! |
On that note, the preview image seems to be made using 24px, isn't it? So it's probably better to use this opportunity to change it to 16px too. It's making the icons seem less crisp than they are. |
Good point, I'll change it to 16px and see how it looks like. |
If 16px is too small to be able to easily preview the icons, then 32px might be another option. A 16px pixel perfect icon would look crisp at 32px aswell (or any other multiple of 16, obviously). |
I just had a look, and it seems like I've alread configured 16px for it. See the background-size property in this line: |
Hi @PKief, I just took a look at it, I think the scaling is happening in this line: await page.setViewport({ width: 800, height: 800, deviceScaleFactor: 1.5 });The icons are generated at 16px via css, but then the entire image is being scaled 150%, which results in 24px icons |
|
@lucas-labs thanks for pointing that out. So if I'm not wrong it would be fine by just changing the |
|
@PKief yes, that should do the trick, although I don't know how puppeteer does the scaling internally... If you see there's still blurriness after the change, then setting the scale to 1 and the css property itself to 32px should work. |
|
@lucas-labs, @geekley I've updated the icon preview now, so that the icon is rendered with 32px. here's for example a new image
(reference #2176 (comment)) Thanks for your feedback on this so far! Please let me know if there's anything else which can be improved here. |
True, but I think it kinda defeats the purpose...? That's why IMO it's better to show it exactly how it'll be in the editor (for most people who won't be zooming in). Unless the purpose of the preview is something else, of course. |
you're right, too. This is why I decided to show both versions now:
|
This PR implements changes to approximately 240 file icons and all (~150) folder icons to enhance their appearance at 16x16 px, aligning with the default size of icons in VS Code.
The changes encompass various adjustments aimed at improving clarity, sharpness, and overall visual appeal when viewed at this smaller scale.
Additionally, it includes a new section in the CONTRIBUTING.md guide offering a few tips and tricks for designing pixel-perfect icons.
closes: #2225
closes: #1310