feat: ✨ clone and recolorize icons #2305

lucas-labs · 2024-04-25T14:15:03Z

This PR aims to introduce the feature described in #2304

It allows to "clone" any existent icon and recolorize it to create variants of the same icon with different colors that can be assigned to folder names, file extensiones and file names by user settings.

example

caveats

This PR adds two dependencies to the package:

chroma-js: to calculate color distances and find matches inside the material palette
svgson: to parse the svg files and manipulate them

//TODO

implement icons cloning via vscode user settings
support lightColor configuration, to create light variants of the clone
handle edge cases:
- Icons that should not change colors of some paths or groups (e.g. icons with brand motifs) -> ability to ignore recoloring specific svg nodes by setting mit-no-recolor="true" as a node attribute
support generating clones by setting them in folderIcons.ts and fileIcons.ts files, so that they are generated at build time.
tests:
- fix currently failing tests
- test new functionality
documentation

Closes #2304
Closes #228

vscode-test was renamed to @vscode/test-electron and the former package was unable to run tests on windows. this commit removes vscode-test and updates it to the last version of @vscode/test-electron

lucas-labs · 2024-04-25T15:27:37Z

Regarding d931fc4, I updated vscode-test because it was renamed to @vscode/test-electron. The latest release for the vscode-test was in 2021, and had some issues when trying to run tests in windows (see microsoft/vscode-test#244)

PKief · 2024-04-25T16:23:50Z

Regarding d931fc4, I updated vscode-test because it was renamed to @vscode/test-electron. The latest release for the vscode-test was in 2021, and had some issues when trying to run tests in windows (see microsoft/vscode-test#244)

That's fine for me. I couldn't find the time so far for updating the test setup, but feel free to do so if it helps you implement the changes. It will be helpful.

improves recolorization logic, keeping originally darker colors dark and lighter colors light even after recolor

adds support for a custom svg attribute `mit-no-recolor` that, when set to true, will keep the original color of the svg node on which is applied

github-actions · 2024-04-25T23:45:23Z

Preview

Thank 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.

github-actions · 2024-04-26T00:00:40Z

Preview

Thank 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.

lucas-labs · 2024-04-26T00:00:49Z

8445f2f and 77d76a9 change some edge-case icons, adding a custom attribute mit-no-recolor="true" to certain conflictive paths or groups. That attribute allows us to configure specific nodes in an svg to be ignored during recolor (e.g. it allow us to not change the color of the gitlab logo, just the color of the folders).

It doesn't change anything about the icons, it just adds the attributes. The failing check in the action is because some of these files were already using "forbidden" colors.

Well it doesn't change anything else.... with one exception: azure-pipelines. Here I removed 2 paths that were hidden behind other paths (were not visible at all), because it was messing with how the colors were assigned during the recolorization process.

support for creating clones by configuring them in the fileIcons.ts and folderIcons.ts files so that the icons are created at build time allowing contributors to create clones that are shipped with the extension

github-actions · 2024-04-26T21:13:02Z

Preview

Thank 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.

PKief · 2024-04-27T05:56:55Z

8445f2f and 77d76a9 change some edge-case icons, adding a custom attribute mit-no-recolor="true" to certain conflictive paths or groups. That attribute allows us to configure specific nodes in an svg to be ignored during recolor (e.g. it allow us to not change the color of the gitlab logo, just the color of the folders).

It doesn't change anything about the icons, it just adds the attributes. The failing check in the action is because some of these files were already using "forbidden" colors.

Well it doesn't change anything else.... with one exception: azure-pipelines. Here I removed 2 paths that were hidden behind other paths (were not visible at all), because it was messing with how the colors were assigned during the recolorization process.

Thank you for the update. Yes, I'm aware of the fact that not all icons are using material design colors. It's due to the fact that I've added this policy later on, so some icons are not following it, but I want new icons to have proper colors. Don't worry if the pipeline complains about this fact, we can merge this PR anyway.

Please let me know once this PR is ready to test, then I'll have a more detailed look. Right now I'm a few days off, so I'm not able to respond quickly or to test this feature. I'll be back by mid of next week.

mallowigi · 2024-04-27T12:17:49Z

That's a valid PR. It parses colors in svg files and replace them if they are found in the clone configuration.

In my repo I did something more barebones by putting a placeholder in the svg files and allowing users to change the color of the node containing the placeholder attribute. But this implementation is actually dynamic as it parses the icons first and build the colors map before replacing.

Good job

lucas-labs · 2024-04-27T14:48:08Z

@PKief, I think the main functionalities are already done, and they seems to be working pretty good.

You can review it whenever you have the time, but it's not ready for merging yet as I need add some tests and update the documentation explaining how to use the new features first.

Cheers!

github-actions · 2024-04-28T16:05:49Z

Preview

Thank 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.

github-actions · 2024-04-28T17:45:11Z

Preview

Thank 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.

lucas-labs · 2024-04-29T16:43:45Z

Hi @PKief, I just finished updating tests and docs. And the main functionality is also already done. But there are two places that I missed before and I probably need to revisit:

the preview script that runs on each release and generates the preview images for the README. I just realized it will probably create empty icons in the image if there are cloned icons in the folder/files lists because the .svg files won't be there for the cloned icons. I Haven't tested it yet tho.
the preview action that runs on PR commits. Nothing will fail there but it might be nice to find a way to get the action to show the icons if a cloned icon is added by a PR. Since creating a clone icon doesn't imply a changing an .svg file, the action won't detect any icon change and it will not create a preview comment.

But I don't want to add too much complexity in this pr before your review, it's already a pretty long PR. I'll look into it tho, and add those changes later.

lucas-labs · 2024-04-29T17:37:20Z

Some clarifications about the code and the functionality that might not be obvious:

Icons can be cloned by end-users (via user's settings) but also by contributors, modifying folderIcons.ts and fileIcons.ts
When a user sets a cloning setting, the extension will generate user-cloned icons in the path icons/clones. I did this to avoid messing with icons defined by the extension itself in icons/*.svg (this way is easier to remove all user added icons when the user removes or changes their settings, we don't need to track icons that are no longer configured by the user, etc... we can just remove the folder).
When a contributor creates a cloned icon, the svg file will be created at build time with a {name}.clone.svg extension. The idea behind that choice was to avoid accidentally commiting a cloned icon (added icons/*.clone.svg to gitignore). Other than that, once the build has finished and the new svg were generated, cloned icons created by extension config will behave exactly the same as normal .svg icons.

PKief

After over a thousand pull requests for this icon extension, this PR is one of the best and most comprehensive. I have checked the functionality and everything works perfectly. Thank you also for writing unit tests and adapting and improving the Contributing Guide. I know this is a lot of work and I would like to thank you very much for it! I would be happy if you could take a look at one of my comments, otherwise everything is really very well worked out.

icons/folder-gitlab-open.svg

github-actions · 2024-05-04T10:20:06Z

Preview

Thank 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.

PKief · 2024-05-04T10:47:52Z

In addition, I just tried to check if I can replace the angular and nest file icons with the clones. Everything worked pretty good, until I run the command "npm run check" which shows me this error messages:

The check command checks all icon definitions and throws an error if there's an icon used in the fileIcons.ts but no SVG icon is available in the icons directory. In the past I've used this to make sure, that no SVG icon is forgotten but defined in the icon associations.

Would you mind taking a look at this as well?

github-actions · 2024-05-05T12:08:34Z

Preview

Thank 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.

lucas-labs · 2024-05-05T12:28:02Z

In addition, I just tried to check if I can replace the angular and nest file icons with the clones. Everything worked pretty good, until I run the command "npm run check" ...

Nice catch! There are two paths to fix this check that I can think of:

Instead of looking for the cloned files that will be created only after building, we could ensure that the icon used as base exists instead, and assume that the cloning will just work 🤞.
We can change the check script to look for {icon-name}.clone.svg in case of cloned icons (I used a different file extension to be able to gitignore it and prevent commiting cloned svgs). But doing this would require us to run npm run build before trying to run npm run check; otherwhise the cloned svg might not be there yet. I think this would not be a problem for the github action, because the check is already being run as a post-compile step.

What do you think @PKief ?

PKief · 2024-05-05T13:24:38Z

In addition, I just tried to check if I can replace the angular and nest file icons with the clones. Everything worked pretty good, until I run the command "npm run check" ...

Nice catch! There are two paths to fix this check that I can think of:

Instead of looking for the cloned files that will be created only after building, we could ensure that the icon used as base exists instead, and assume that the cloning will just work 🤞.

We can change the check script to look for {icon-name}.clone.svg in case of cloned icons (I used a different file extension to be able to gitignore it and prevent commiting cloned svgs). But doing this would require us to run npm run build before trying to run npm run check; otherwhise the cloned svg might not be there yet. I think this would not be a problem for the github action, because the check is already being run as a post-compile step.

What do you think @PKief ?

@lucas-labs Thank you for sharing your ideas. I'd prefer the first option, because the check can expect the clone functionality to be working. It's just about ensuring that every icon is at it's place. So I'd be fine with checking if the define icon of "base" is existing.

github-actions · 2024-05-05T15:11:14Z

Preview

Thank 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.

github-actions · 2024-05-05T15:35:16Z

Preview

Thank 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.

lucas-labs · 2024-05-05T15:37:17Z

Hi @PKief, I fixed the failing check script. It should be working ok now.

I also fixed an issue with the preview script, that was generating broken links for the cloned icons due to the .clone.svg I mentioned earlier. Now its working.

lucas-labs · 2024-05-05T15:52:22Z

I also fixed an issue with the preview script, that was generating broken links for the cloned icons due to the .clone.svg I mentioned earlier. Now its working.

Although, checking the release.yml gh action, I think it will still create broken links, because the preview is being run as a preversion step and before compiling, which means the .clone.svg icons will not be there yet. The build step is only being run in the last step of the action, as a pre-publish step.

We could change the package.json script so that preversion does the compile step instead

-"preversion": "npm run contributors ...",
+"preversion": "npm run compile && npm run contributors ...",
"version": "npm run changelog && git add CHANGELOG.md",
-"vscode:prepublish": "npm run lint && npm run compile && npm run package-web"
+"vscode:prepublish": "npm run lint && npm run package-web"

Do you think there's a better way to do this?

PKief · 2024-05-05T16:41:45Z

Do you think there's a better way to do this?

Personally, I would prefer not showing all of the cloned versions of an icon in the preview. It's fine if the cloned icons are not shown there. If we for instance take a look at the variations of the nest icon, it's just a waste of space in this preview and does not bring too much value:

It will be much simplier, if just the base icon is shown here.

PKief · 2024-05-05T16:42:39Z

That means for the check script, it would be fine just filtering out the *.clone.svg files. What's your opinion about this? Would you agree with that?

lucas-labs · 2024-05-05T16:46:45Z

That means for the check script, it would be fine just filtering out the *.clone.svg files. What's your opinion about this? Would you agree with that?

Yeah for sure, I just assumed that you might have wanted to keep the variatios in the preview as it is today. But we could just filter them out of the list, that's ok!

github-actions · 2024-05-05T17:40:33Z

Preview

Thank 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.

lucas-labs · 2024-05-05T17:44:09Z

Done, now the preview images generator doesn't take clones into account.

PKief · 2024-05-05T17:55:31Z

Done, now the preview images generator doesn't take clones into account.

Thank you for your quick feedback and customization of the PR. I have just tested your changes and it works perfectly now!

github-actions · 2024-05-05T18:00:27Z

Merge Successful

Thanks for your contribution! 🎉

The changes will be part of the upcoming update on the marketplace.

lucas-labs added 4 commits April 25, 2024 11:07

feat: ✨ clone and recolorize icons

7df7eb9

feat: ✨ integrate icon cloning with the the extension

bc6abd7

chore: 🧹 update vscode-test dependency

d931fc4

vscode-test was renamed to @vscode/test-electron and the former package was unable to run tests on windows. this commit removes vscode-test and updates it to the last version of @vscode/test-electron

test: 🧪 fix failing tests

c1fafe6

lucas-labs added 5 commits April 25, 2024 15:24

refactor: 🔨 improve in-code docs & comments

f4634a5

feat: ✨ config to create light variants of the icon

9e1ba79

feat: ✨ improve recolorization

8522d4d

improves recolorization logic, keeping originally darker colors dark and lighter colors light even after recolor

feat: ✨ edge cases: support ignoring recolorizing paths

8d399c4

adds support for a custom svg attribute `mit-no-recolor` that, when set to true, will keep the original color of the svg node on which is applied

feat: ✨ do not recolor some paths in some edge-case icons

8445f2f

feat: ✨ jsconfig edge-case

77d76a9

lucas-labs added 2 commits April 26, 2024 13:37

refactor: 🔨 simplify cloning process

15ba192

feat: ✨ allow creating clones at build time

400d0cf

support for creating clones by configuring them in the fileIcons.ts and folderIcons.ts files so that the icons are created at build time allowing contributors to create clones that are shipped with the extension

test: 🧪 test clone configuration generation

32f2e48

lucas-labs added 4 commits April 28, 2024 08:53

chore: 🧹 fix file names to camelCase to match project style

8eebc00

test: 🧪 test clone data config generation

efa6ea1

test: 🧪 color manipulation tests

f8329a0

test: 🧪 test svg cloning and recolor

796d096

test: 🧪 json config generation from user options

dc53094

lucas-labs marked this pull request as ready for review April 28, 2024 18:02

PKief self-requested a review May 1, 2024 09:24

PKief requested changes May 4, 2024

View reviewed changes

icons/folder-gitlab-open.svg Show resolved Hide resolved

Merge branch 'main' into feat/custom-color-clones

0f66d17

feat: ✨ documentation for mit-no-recolor attribute

caf78ff

lucas-labs requested a review from PKief May 5, 2024 13:00

fix: 🚑 icon availability check failing on clone icons

c5565bb

fix: 🚑 broken links when generating icons preview png

49f6e7b

lucas-labs added 2 commits May 5, 2024 13:08

fix: 🚑 icon usage check failing for clone icons

c1b7796

docs: 📝 CONTRIBUTING.md - add missing section to the TOC

636503c

fix: 🚑 filter out cloned icons from README preview pngs

f5edca0

PKief approved these changes May 5, 2024

View reviewed changes

PKief merged commit 493d235 into PKief:main May 5, 2024
3 of 4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ✨ clone and recolorize icons #2305

feat: ✨ clone and recolorize icons #2305

lucas-labs commented Apr 25, 2024 •

edited

lucas-labs commented Apr 25, 2024 •

edited

PKief commented Apr 25, 2024

github-actions bot commented Apr 25, 2024

github-actions bot commented Apr 26, 2024

lucas-labs commented Apr 26, 2024 •

edited

github-actions bot commented Apr 26, 2024

PKief commented Apr 27, 2024

mallowigi commented Apr 27, 2024

lucas-labs commented Apr 27, 2024

github-actions bot commented Apr 28, 2024

github-actions bot commented Apr 28, 2024

lucas-labs commented Apr 29, 2024

lucas-labs commented Apr 29, 2024 •

edited

PKief left a comment

github-actions bot commented May 4, 2024

PKief commented May 4, 2024

github-actions bot commented May 5, 2024

lucas-labs commented May 5, 2024

PKief commented May 5, 2024

github-actions bot commented May 5, 2024

github-actions bot commented May 5, 2024

lucas-labs commented May 5, 2024

lucas-labs commented May 5, 2024 •

edited

PKief commented May 5, 2024

PKief commented May 5, 2024

lucas-labs commented May 5, 2024

github-actions bot commented May 5, 2024

lucas-labs commented May 5, 2024

PKief commented May 5, 2024

github-actions bot commented May 5, 2024

feat: ✨ clone and recolorize icons #2305

feat: ✨ clone and recolorize icons #2305

Conversation

lucas-labs commented Apr 25, 2024 • edited

lucas-labs commented Apr 25, 2024 • edited

PKief commented Apr 25, 2024

github-actions bot commented Apr 25, 2024

Preview

github-actions bot commented Apr 26, 2024

Preview

lucas-labs commented Apr 26, 2024 • edited

github-actions bot commented Apr 26, 2024

Preview

PKief commented Apr 27, 2024

mallowigi commented Apr 27, 2024

lucas-labs commented Apr 27, 2024

github-actions bot commented Apr 28, 2024

Preview

github-actions bot commented Apr 28, 2024

Preview

lucas-labs commented Apr 29, 2024

lucas-labs commented Apr 29, 2024 • edited

PKief left a comment

Choose a reason for hiding this comment

github-actions bot commented May 4, 2024

Preview

PKief commented May 4, 2024

github-actions bot commented May 5, 2024

Preview

lucas-labs commented May 5, 2024

PKief commented May 5, 2024

github-actions bot commented May 5, 2024

Preview

github-actions bot commented May 5, 2024

Preview

lucas-labs commented May 5, 2024

lucas-labs commented May 5, 2024 • edited

PKief commented May 5, 2024

PKief commented May 5, 2024

lucas-labs commented May 5, 2024

github-actions bot commented May 5, 2024

Preview

lucas-labs commented May 5, 2024

PKief commented May 5, 2024

github-actions bot commented May 5, 2024

Merge Successful

lucas-labs commented Apr 25, 2024 •

edited

lucas-labs commented Apr 25, 2024 •

edited

lucas-labs commented Apr 26, 2024 •

edited

lucas-labs commented Apr 29, 2024 •

edited

lucas-labs commented May 5, 2024 •

edited