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]

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

What's the point of making 2 different icons?

[PKief]

For brainstorming all ideas are welcome and we don't judge. Let's put all ideas in this chat and we'll get closer to a final solution. @tiagoporto your ideas are welcome and I appreciate your efforts.

I also think that this one would go into the right direction. I mean lintstaged is something like a security gate before something is going to be committed right? So we could think of some security shields as icons as well. We could also think of something like this shield icon. The plus could be standing for the meaning that "staged" files will be files which are added to the history:

Sure, we need to transform it into a more minimalistic and material design, but for just brainstorming it looks fine.

@okineadev is right, in the end it would be beneficial to have a single icon which would fit into both projects without any adjustments.

[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)