vscode-cmake-tools icon indicating copy to clipboard operation
vscode-cmake-tools copied to clipboard

Use product icons instead of 'hardcoded' icons

Open DeltaRazero opened this issue 1 year ago • 1 comments

This changes themability

The following changes are proposed/purpose of the changes:

  • Add a product icon font instead of 'hardcoded' icons. This has the following benefits:
    • Product icon themes can now override the icons if desired
    • Color themes can now properly set the colors of the icons, so no need to maintain light and dark icons that are not following the theme's colors.
  • Add a script using FontForge scripting API for generating product icon font for future use
    • I feel like FontForge is a good cross-platform open source platform to use as font generator. It is robust and it doesn't require a separate installation of Python to invoke the scripting API (i.e. FontForge bundles its own Python runtime).
    • The inclusion of the script is purely for future use if more icons are needed
    • Filenames of icons now include the glyph codepoint so it's easier to see what the codepoint is for each icon, as well as the script uses this for mapping the icons to the desired codepoints.
  • Remove redundant icons that are already part of codicons; change the package.json to use the already present codicons

Furthermore, I centered the build icon as it was off-center.

DeltaRazero avatar May 04 '24 20:05 DeltaRazero

@microsoft-github-policy-service agree

DeltaRazero avatar May 04 '24 20:05 DeltaRazero

@gcampbell-msft Could you kindly provide me with feedback or a comment please? Thanks!

DeltaRazero avatar May 16 '24 12:05 DeltaRazero

@DeltaRazero My apologies for the much too long delay in interacting and reviewing this PR, we have been very busy, but again, my apologies.

I think that this is a great addition to help us have an easier time with these icons, and it also makes us match the vscode docs here better: https://code.visualstudio.com/api/references/contribution-points#contributes.icons.

However, I don't like the idea of having to install fontforge. Therefore, I think we should instead follow the pattern of the https://github.com/microsoft/vscode-extension-samples/tree/main/product-icon-theme-sample example and use the webfont package, and create a new "tool" in typescript that does the same thing as your python script.

Could you please follow this example and change the FontForge use to be typescript/javascript?

gcampbell-msft avatar Oct 07 '24 12:10 gcampbell-msft

Hey @gcampbell-msft Totally no problem. Also now that I think about it, it's indeed better to the script be JS/TS based.

To avoid confusion, regarding the following:

However, I don't like the idea of having to install fontforge. Therefore, I think we should instead follow the pattern of the https://github.com/microsoft/vscode-extension-samples/tree/main/product-icon-theme-sample example and use the webfont package, and create a new "tool" in typescript that does the same thing as your python script.

Do you mean to add a tool just like the pr-creator tool in this repo? If so, I'll follow the structure of that.

DeltaRazero avatar Oct 09 '24 19:10 DeltaRazero

Hey @gcampbell-msft Totally no problem. Also now that I think about it, it's indeed better to the script be JS/TS based.

To avoid confusion, regarding the following:

However, I don't like the idea of having to install fontforge. Therefore, I think we should instead follow the pattern of the https://github.com/microsoft/vscode-extension-samples/tree/main/product-icon-theme-sample example and use the webfont package, and create a new "tool" in typescript that does the same thing as your python script.

Do you mean to add a tool just like the pr-creator tool in this repo? If so, I'll follow the structure of that.

Yes! That is exactly what I mean, that's a great idea.

gcampbell-msft avatar Oct 10 '24 13:10 gcampbell-msft