Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[NEW ICONS] tmux #129

Merged
merged 10 commits into from
Jun 27, 2024
Merged

[NEW ICONS] tmux #129

merged 10 commits into from
Jun 27, 2024

Conversation

ItsJoshBrown
Copy link
Contributor

@ItsJoshBrown ItsJoshBrown commented Jun 27, 2024 •
edited by LelouchFR
Loading

Add New Icon(s)

Icon Details

Icon ID Icon
tmux laravelspark-dark image

Notes

  • tmux is a terminal multiplexer. It lets you switch easily between several programs in one terminal, detach them (they keep running in the background) and reattach them to a different terminal.

Checklist

  • Added icon(s) to the appropriate directory
  • Updated documentation with the new icon(s)
  • Verified the icon(s) display correctly
  • If the icon has light and dark, verified the auto switch works correctly

Mentioned in

closes tandpfun/skill-icons#392

@LelouchFR
Copy link
Owner

I think it would be better if it covers the whole icon (since square in square)

@ItsJoshBrown
Copy link
Contributor Author

ItsJoshBrown commented Jun 27, 2024 •
edited
Loading

I think it would be better if it covers the whole icon (since square in square)

That's what I thought, but then I realized the radius for the corners was not the same, and reverted back to this. let me try to see what I can do.

@ItsJoshBrown
Copy link
Contributor Author

ItsJoshBrown commented Jun 27, 2024 •
edited
Loading

what are your thoughts on this @LelouchFR

image

<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_50_18)">
<mask id="mask0_50_18" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.8 111.951V0H123.2V233.498H132.8V121.547H256V111.951H132.8ZM0 24.0055C0 10.7505 10.7552 0 24 0H232C245.253 0 256 10.7553 256 24.0055V233.514H0V24.0055Z" fill="#3C3C3C"/>
</mask>
<g mask="url(#mask0_50_18)">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#3C3C3C"/>
</g>
<mask id="mask1_50_18" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#242938"/>
</mask>
<g mask="url(#mask1_50_18)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 185H256V231.742C256 245.098 245.245 255.919 232 255.919H24C10.7472 255.919 0 245.109 0 231.742V185ZM0 185H256V233.354H0V185Z" fill="#1BB91F"/>
</g>
</g>
</svg>

@LelouchFR
Copy link
Owner

maybe more like this (just added a background with the original underneath so it's not "nothing" behind)

image

dark:

<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_667_2)">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#242938"/>
<mask id="mask0_667_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="234">
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.8 111.951V0H123.2V233.498H132.8V121.547H256V111.951H132.8ZM0 24.0055C0 10.7505 10.7552 0 24 0H232C245.253 0 256 10.7553 256 24.0055V233.514H0V24.0055Z" fill="#3C3C3C"/>
</mask>
<g mask="url(#mask0_667_2)">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#3C3C3C"/>
</g>
<mask id="mask1_667_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#242938"/>
</mask>
<g mask="url(#mask1_667_2)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 185H256V231.742C256 245.098 245.245 255.919 232 255.919H24C10.7472 255.919 0 245.109 0 231.742V185ZM0 185H256V233.354H0V185Z" fill="#1BB91F"/>
</g>
</g>
<defs>
<clipPath id="clip0_667_2">
<rect width="256" height="256" fill="white"/>
</clipPath>
</defs>
</svg>

light:

<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_667_14)">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#F4F2ED"/>
<mask id="mask0_667_14" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="234">
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.8 111.951V0H123.2V233.498H132.8V121.547H256V111.951H132.8ZM0 24.0055C0 10.7505 10.7552 0 24 0H232C245.253 0 256 10.7553 256 24.0055V233.514H0V24.0055Z" fill="#3C3C3C"/>
</mask>
<g mask="url(#mask0_667_14)">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#3C3C3C"/>
</g>
<mask id="mask1_667_14" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#242938"/>
</mask>
<g mask="url(#mask1_667_14)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 185H256V231.742C256 245.098 245.245 255.919 232 255.919H24C10.7472 255.919 0 245.109 0 231.742V185ZM0 185H256V233.354H0V185Z" fill="#1BB91F"/>
</g>
</g>
<defs>
<clipPath id="clip0_667_14">
<rect width="256" height="256" fill="white"/>
</clipPath>
</defs>
</svg>

@ItsJoshBrown
Copy link
Contributor Author

I had to do the -light slightly differently it kept having weird artifacts around the corners.

@LelouchFR
Copy link
Owner

@ItsJoshBrown could you do the auto theme ? thanks

@ItsJoshBrown
Copy link
Contributor Author

@ItsJoshBrown could you do the auto theme ? thanks

Yes, sorry should be good now.

@LelouchFR
Copy link
Owner

@ItsJoshBrown could you do the auto theme ? thanks

Yes, sorry should be good now.

Please add id to style (as name) to auto (#tmux {}) (and id="tmux" to svg tag)

@LelouchFR
Copy link
Owner

@ItsJoshBrown Take example on other icons.

@ItsJoshBrown
Copy link
Contributor Author

@ItsJoshBrown Take example on other icons.

I modified it to go with the typical vs styling a particular path.

@LelouchFR
Copy link
Owner

LelouchFR commented Jun 27, 2024 •
edited
Loading

@ItsJoshBrown Take example on other icons.

I modified it to go with the typical vs styling a particular path.

this is great ! but can you just format the tag script and the #tmux { to be like any other one (all the way unindented) (sorry being picky)

@ItsJoshBrown
Copy link
Contributor Author

No, you are all good xD, I didn't even realize I had the indent there.

@LelouchFR
Copy link
Owner

perfect :)

LelouchFR
LelouchFR approved these changes Jun 27, 2024
View reviewed changes
Copy link
Owner

@LelouchFR LelouchFR left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@LelouchFR LelouchFR merged commit c3a10f7 into LelouchFR:main Jun 27, 2024
2 checks passed
@ItsJoshBrown ItsJoshBrown deleted the add-tmux branch June 30, 2024 02:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@LelouchFR LelouchFR LelouchFR approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[NEW ICON] Playwright, Storybook, Npm, Yarn, Terminal, Tmux
2 participants
@ItsJoshBrown @LelouchFR