feat: add lintstaged icons

[PKief]

Description

Add lintstaged support

Icon is based on lintstaged avatar: https://github.com/lint-staged

.lintstagedrc
.lintstagedrc.json
.lintstagedrc.yaml
.lintstagedrc.yml
.lintstagedrc.mjs
lint-staged.config.mjs
.lintstagedrc.cjs
lint-staged.config.cjs
lint-staged.config.js
.lintstagedrc.js

Recreate #2246

Follow up of #2773.

Contribution Guidelines

• By creating this pull request, I acknowledge that I have read the Contribution Guidelines for this project
• I have read the Code Of Conduct and promise to abide by these rules

[github-actions]

Preview

Thank you for creating a pull request. This preview shows you how your icon will look on the different themes:

Check how your icon fits in a 16x16 grid with our Pixel Perfect Checker by following this link.

You can find more information on how to contribute in the contribution guidelines.

[tiagoporto]

Hi @okineadev, following previous discussion.
I've created 2 options:

icon	vscode

Should I refine one of them or should we abandon this PR?

@PKief it looks like I don't have permission to push to this branch.

[okineadev]

Hi @okineadev, following previous discussion.
I've created 2 options:

icon	vscode

Should I refine one of them or should we abandon this PR?

@PKief it looks like I don't have permission to push to this branch.

Looks cool, but we need a sign 🚫 over the hand

[PKief]

@PKief it looks like I don't have permission to push to this branch.

I've send you an invite for editing the branch. Please check your notifications to accept the invitation.

[tiagoporto]

@okineadev wdyt?

[okineadev]

It looks cool, but you still need 1 pixel spacing from the edges, and I also think it's better to make the hand shorter, because it looks kind of long (vertically)

[tiagoporto]

It looks cool, but you still need 1 pixel spacing from the edges, and I also think it's better to make the hand shorter, because it looks kind of long (vertically)

@okineadev, the icon is updated with suggestions.

[PKief]

I'm not super happy with it tbh. I think it would be worth thinking about more options here. Many people and projects use this icon and it has much visibility. We even have the chance of creating a new logo for them if it might look good: lint-staged/lint-staged#606 (comment). What if we think of something new?

Even other icon extension maintainers think that this icon is literally sh*t 😂
vscode-icons/vscode-icons#1764 (review)

Edit: more details on this:
I know that we already changed it (without using that s... icon) but still, I'm not fully satisfied. We're still combining two different icons (the cancel icon and the hand). We're using two different colors. In total this makes the icon little bit more complicated to recognize. Ideally we would have something which is good to recognize and in a single color.

One suggestion would be to design it in this pattern. Having a cancel icon on top of another symbol but cutting the background symbol to give it enough space:

I'm open for different suggestions too. Once I've little more time I'll try to elaborate on this too.

[okineadev]

I'm not super happy with it tbh. I think it would be worth thinking about more options here. Many people and projects use this icon and it has much visibility. We even have the chance of creating a new logo for them if it might look good: lint-staged/lint-staged#606 (comment). What if we think of something new?

Even other icon extension maintainers think that this icon is literally sh*t 😂 vscode-icons/vscode-icons#1764 (review)

Edit: more details on this: I know that we already changed it (without using that s... icon) but still, I'm not fully satisfied. We're still combining two different icons (the cancel icon and the hand). We're using two different colors. In total this makes the icon little bit more complicated to recognize. Ideally we would have something which is good to recognize and in a single color.

One suggestion would be to design it in this pattern. Having a cancel icon on top of another symbol but cutting the background symbol to give it enough space:

I'm open for different suggestions too. Once I've little more time I'll try to elaborate on this too.

I have an idea to use the bug icon, although I don't know if it will be appropriate, because lint-staged hardly protects against bugs, it rather lints the code

UPD: Link: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:bug_report:FILL@1;wght@400;GRAD@0;opsz@20&icon.query=virus&icon.style=Rounded&icon.size=16&icon.color=%23e8eaed

[PKief]

@lucas-labs I just wanted to ping you in case you haven't seen this already. Maybe you have already thought about this and created something in your fork already. Lint-staged is quite popular, so it would be cool if we can have a special icon for it. I didn't have the time yet to get into creativity 😅 Just in case you have some spare time and would like to tackle a challenge, here we go 😉 But no worries, if that isn't the case, it's also fine.

[mallowigi]

FYI, I created this icon: https://raw.githubusercontent.com/AtomMaterialUI/iconGenerator/ec25f005bd54621390955f52b774e2afb59c52e8/assets/icons/files/lint-staged.svg

Represents a broom, for cleaning the lint (don't recommend the color though, I should probably change it)

[okineadev]

FYI, I created this icon: AtomMaterialUI/iconGenerator@ec25f00/assets/icons/files/lint-staged.svg (raw)

Represents a broom, for cleaning the lint (don't recommend the color though, I should probably change it)

Why does it look like a tail 😭

[okineadev]

How about the lint roller icon?

[mallowigi]

FYI, I created this icon: AtomMaterialUI/iconGenerator@ec25f00/assets/icons/files/lint-staged.svg (raw)
Represents a broom, for cleaning the lint (don't recommend the color though, I should probably change it)

Why does it look like a tail 😭

I'm not fond of the icon either, there are better suited icons to represent a broom, like https://fonts.google.com/icons?icon.style=Outlined&icon.query=sweep&icon.set=Material+Symbols&selected=Material+Symbols+Outlined:mop:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23e8eaed

Now I remember why it's brown..................

[tiagoporto]

https://fonts.google.com/icons?icon.style=Outlined&icon.query=sweep&icon.set=Material+Symbols&selected=Material+Symbols+Outlined:mop:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23e8eaed

I like the lint roller idea. But it could be hard to make it clear that it's a lint roller.

[PKief]

What do you think about this format paint icon?
https://pictogrammers.com/library/mdi/icon/format-paint

[okineadev]

What do you think about this format paint icon? pictogrammers.com/library/mdi/icon/format-paint

No, because it does not represent linting or anything related to it, as you can see it is a roller, and it is for drawing, and such an icon is already used for Renovate

[okineadev]

I have not seen such lint rollers as on the icon, except for the following:

[okineadev]

@PKief, maybe we should call someone from https://github.com/lint-staged/lint-staged ?
Since we have the opportunity to create a project icon

We can write to lint-staged/lint-staged#606

[PKief]

@PKief, maybe we should call someone from https://github.com/lint-staged/lint-staged ?
Since we have the opportunity to create a project icon

We can write to lint-staged/lint-staged#606

yeah but we should come with a few proposals. So that's what we are discussing here first.

[tiagoporto]

I was doing some brainstorming, we also could use a shield and mix it with another icon.

[tiagoporto]

Also, I was playing with the lint roller idea

[okineadev]

Also, I was playing with the lint roller idea

No, it should be minimalist and Material Design style.

[tiagoporto]

No, it should be minimalist and Material Design style.

I thought we were working on an icon suggestion for lint-staged lib. After it can be converted to a material icon theme.

Based on this comment:

yeah but we should come with a few proposals. So that's what we are discussing here first.

I suggest @PKief and @okineadev be on the same page because I have worked on an icon for a few days, and now we have a PR that is approved and blocked at the same time. I don't know how to proceed.

[okineadev]

Okay, I'll try to draw my own version of the icon later

[tiagoporto]

What's the point of making 2 different icons?

I'm dedicating my time and trying to help. Let's be nice!

I noticed that some icons are not the official ones, so what is the problem to have a simplified version here?

oficial	material icon theme
https://stryker-mutator.io/images/stryker.svg	https://github.com/material-extensions/vscode-material-icon-theme/blob/main/icons/stryker.svg

[tiagoporto]

@PKief, more ideas.

[okineadev]

What's the point of making 2 different icons?

I'm dedicating my time and trying to help. Let's be nice!

I noticed that some icons are not the official ones, so what is the problem to have a simplified version here?

oficial material icon theme

stryker-mutator.io/images/stryker.svg main/icons/stryker.svg

Well, look, if we make a good icon in Material Design and they accept it, why would we make a more complicated icon

[PKief]

Well, look, if we make a good icon in Material Design and they accept it, why would we make a more complicated icon

Can we focus on ideas now please? I don't want to read more comments about "do we need 1 or 2 icons". Please add your own ideas and then we can decide what we're doing. If you have a nice idea for one icon which would fit as a logo as well, please post it here. One icon would be beneficial - that's it. Now ideas (only) and no judging please :D

[lucas-labs]

... Maybe you have already thought about this and created something in your fork already.

Nope I haven't done this one for my fork either.

I kinda like the ww2 german granade lint roller idea. Although, as I'm not native english speaker, I don't really know if people really associates code linters with a lint roller. But I like it.

[PKief]

The roller idea is nice, however I think the logo should express lint-staged's nature of blocking some staged files from being proceeded. In one of my projects we're using it also to run unit tests, which wouldn't be perfectly covered by the roller right? That's why I came up with these proposals:

A

Shows a shield with two colors behind an exclamation mark. The red and green colors express the behavior of lint-staged's security gates, that for instance some steps are green and others are red. The exclamation mark is expressing the power of lint-staged to stop a whole process if something is throwing an error.

B

It shows a bunch of circles which are expressing the different file patterns and quality gate steps which you can define in a lint-staged config file. The red circle in the middle expresses a failing lint stage step. It's surrounded by an abstract cross which highlights the middle circle.

C

A very minimalistic proposal. It shows a magnifier on top of a green shield. The shield expresses lint-staged's nature of protecting files from beeing committed after staging. The magnifier expresses the search for mistakes and errors in the staged files.

D

This proposal focuses on the staging by showing a "+" symbol in front of a shield. The shield again expresses lint-staged's nature of blocking files from being committed.

E

Instead of a shield this one is more about the positive way, if checks are successful, things can be merged / proceeded.

Note

These are just some ideas which still should be refined.

[okineadev]

The roller idea is nice, however I think the logo should express lint-staged's nature of blocking some staged files from being proceeded. In one of my projects we're using it also to run unit tests, which wouldn't be perfectly covered by the roller right? That's why I came up with these proposals:

A

Shows a shield with two colors behind an exclamation mark. The red and green colors express the behavior of lint-staged's security gates, that for instance some steps are green and others are red. The exclamation mark is expressing the power of lint-staged to stop a whole process if something is throwing an error.

B

It shows a bunch of circles which are expressing the different file patterns and quality gate steps which you can define in a lint-staged config file. The red circle in the middle expresses a failing lint stage step. It's surrounded by an abstract cross which highlights the middle circle.

C

A very minimalistic proposal. It shows a magnifier on top of a green shield. The shield expresses lint-staged's nature of protecting files from beeing committed after staging. The magnifier expresses the search for mistakes and errors in the staged files.

D

This proposal focuses on the staging by showing a "+" symbol in front of a shield. The shield again expresses lint-staged's nature of blocking files from being committed.

E

Instead of a shield this one is more about the positive way, if checks are successful, things can be merged / proceeded.

Note

These are just some ideas which still should be refined.

The roller idea is nice, however I think the logo should express lint-staged's nature of blocking some staged files from being proceeded. In one of my projects we're using it also to run unit tests, which wouldn't be perfectly covered by the roller right? That's why I came up with these proposals:

A

Shows a shield with two colors behind an exclamation mark. The red and green colors express the behavior of lint-staged's security gates, that for instance some steps are green and others are red. The exclamation mark is expressing the power of lint-staged to stop a whole process if something is throwing an error.

B

It shows a bunch of circles which are expressing the different file patterns and quality gate steps which you can define in a lint-staged config file. The red circle in the middle expresses a failing lint stage step. It's surrounded by an abstract cross which highlights the middle circle.

C

A very minimalistic proposal. It shows a magnifier on top of a green shield. The shield expresses lint-staged's nature of protecting files from beeing committed after staging. The magnifier expresses the search for mistakes and errors in the staged files.

D

This proposal focuses on the staging by showing a "+" symbol in front of a shield. The shield again expresses lint-staged's nature of blocking files from being committed.

E

Instead of a shield this one is more about the positive way, if checks are successful, things can be merged / proceeded.

Note

These are just some ideas which still should be refined.

I like the C icon the most because, unlike the others, it doesn't represent "good" or "bad", it means "need to check"

The idea behind the B icon is really cool, but it's too complicated and it's hard to intuitively understand its meaning

[tiagoporto]

Option C. (Maybe replace the color)

[ViniDevBR]

why we dont the original icon from lib??
this works in dark and light mode

[tiagoporto]

Hi @ViniDevBR, you could read more on #2773, the other guys don't like the original one. We were trying a new icon.
No success until now as you can see.

[zyycn]

I think we can release a version based on the official icon first, and then replace the icon based on community feedback. This icon may remain a lingering controversy for a long time—it’s hard to satisfy everyone.

[ViniDevBR]

Hi @ViniDevBR, you could read more on #2773, the other guys don't like the original one. We were trying a new icon. No success until now as you can see.

You say "We were"...
Who is?

This is 7 months STOPPED. Nobody is trying nothing.

This is simple guys. Im new here but think with me.
Why we need to LIKE the icon? Who created the lib maked an icon.
Why we couldnt respect the original?

and... Why dont release the original and if the people dont like we change. But now it's stopped 7 months because people dont like? Impossible to satisfy everyone.

Im using this during 3 years and there is a lot of ORIGINAL ICONS and this need to be different because people dont like?
and looking with the eyes of the owner from lint-staged. Would like to see the original or another icon?

[PKief]

@ViniDevBR Please keep your tone respectful toward maintainers. Comments like yours raise red flags.

“We were” refers to myself and other contributors working in our free time to keep this project aligned with our design standards. Saying “nobody is trying” ignores the ongoing work visible in our PRs and issues regarding other icons and requests.

We don’t include all original icons — they must fit the Material Design style. The lint-staged icon doesn’t meet our quality standards; if you disagree, you can raise it with the project itself: lint-staged/lint-staged#606. You can also use a different icon theme or add a custom icon as documented here: https://github.com/material-extensions/vscode-material-icon-theme?tab=readme-ov-file#custom-svg-icons. Or you can suggest another icon or an alternative abstraction of the original logo which can go along with the Material Design look and feel.

Further disrespectful comments will lead to a permanent ban.

[PKief]

I think we can release a version based on the official icon first, and then replace the icon based on community feedback. This icon may remain a lingering controversy for a long time—it’s hard to satisfy everyone.

That's actually true, we can't satisfy everyone. But at the same time we're not aiming to simply show any random original icon for every possible file only to just have something. Our goal is that it looks good and the icons should fit together. And for the lintstaged config files we still show our default icons - it's not like if we wouldn't show anything there:

[ViniDevBR]

@ViniDevBR Please keep your tone respectful toward maintainers. Comments like yours raise red flags.

“We were” refers to myself and other contributors working in our free time to keep this project aligned with our design standards. Saying “nobody is trying” ignores the ongoing work visible in our PRs and issues regarding other icons and requests.

We don’t include all original icons — they must fit the Material Design style. The lint-staged icon doesn’t meet our quality standards; if you disagree, you can raise it with the project itself: lint-staged/lint-staged#606. You can also use a different icon theme or add a custom icon as documented here: https://github.com/material-extensions/vscode-material-icon-theme?tab=readme-ov-file#custom-svg-icons. Or you can suggest another icon or an alternative abstraction of the original logo which can go along with the Material Design look and feel.

Further disrespectful comments will lead to a permanent ban.

First, SORRY

But when i said “nobody is trying”, im saying about this icon and not about all.

and today im using the original one with custom svg icons...
but now i have a doubt...

How can we use a custom svg file inside .vscode in the project? Not the global vscode settings
just to all members of the team use the same icon

and lets go CONTINUE the discussion to accept one icon for this. Now i can say
nobody is discussing ABOUT THIS ICON

[PKief]

I came to the conclusion that this cancel icon without the turd in the background doesn't look that bad. It also fulfills the purpose that it kind of "cancels" a commit in case one of the conditions went wrong. We keep it without that turd and I personally see that as a way to go for that icon (I'm also frequent user of lintstaged and like that project):

[lucas-labs]

I agree, 🚫 is simple and serves the purpose just fine.
LGTM!

[github-actions]

Merge Successful

Thanks for your contribution! 🎉

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