Adding iTerm2 icon

[forsgren]

Previous icon in this PR (now replaced)

Alexa rank: 117,732

Checklist

• I updated the JSON data in _data/simple-icons.json
• I optimized the icon with SVGO or SVGOMG
• The SVG viewbox is 0 0 24 24

Description

• Extracted vector from: https://github.com/gnachman/iTerm2/blob/6a857f3f5872eb1465ddc0dd83412015991e79ae/images/AppIcon/iTermIcon.sketch

[jorgeamadosoria]

While I admit that this looks better than the source png, It's not an exact match, right?
the inner white line I think it's made to separate the black border of the "screen" and the less-black background of the screen itself.
The problem with that is that that's not what the icon is. Either the inner line is too thick in the monochrome version (and would have to be made a single pixel stroke) or the black band around the "screen" should be white in the monochrome version to keep everything else in order.
Again, I get it, this is more aesthetic, but the original is not like this. We should aim for matches as precise as possible regardless of the aesthetic value of the icons.

[jorgeamadosoria]

I used a different source: https://icon-icons.com/es/icono/iterm-terminal/161274
This is the optimized svg:
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>iTerm2</title><path d="M5.214 0A5.202 5.202 0 0 0 0 5.214v13.572A5.202 5.202 0 0 0 5.214 24h13.572A5.202 5.202 0 0 0 24 18.786V5.214A5.202 5.202 0 0 0 18.786 0zm-.036.635h13.644a4.534 4.534 0 0 1 4.543 4.543v13.644a4.534 4.534 0 0 1-4.543 4.543H5.178a4.534 4.534 0 0 1-4.543-4.543V5.178A4.534 4.534 0 0 1 5.178.635zm-.017 1.788a2.732 2.732 0 0 0-2.738 2.738v13.678a2.732 2.732 0 0 0 2.738 2.738h13.678a2.732 2.732 0 0 0 2.738-2.738V5.161a2.732 2.732 0 0 0-2.738-2.738zm-.08 1.27h.522v.816a2.725 2.725 0 0 1 .796.207c.06.023.102.04.127.052l-.255.472a2.224 2.224 0 0 0-.146-.058 2.556 2.556 0 0 0-.204-.08 2.038 2.038 0 0 0-.248-.07 1.265 1.265 0 0 0-.267-.028.904.904 0 0 0-.388.08.263.263 0 0 0-.165.26c0 .077.014.146.044.207a.54.54 0 0 0 .14.156c.064.046.14.09.229.132.093.038.2.077.318.115.157.058.297.117.42.179.123.061.227.13.312.207a.752.752 0 0 1 .19.265c.048.1.07.217.07.351a.903.903 0 0 1-.063.334.872.872 0 0 1-.184.3c-.08.092-.183.173-.306.242a1.419 1.419 0 0 1-.42.144v.851h-.521v-.828A2.8 2.8 0 0 1 4.7 7.94a4.278 4.278 0 0 1-.567-.196 4.159 4.159 0 0 1-.152-.08l.273-.507c.03.02.08.046.153.08.072.035.153.071.242.11.093.034.189.065.286.092.098.027.189.04.274.04.424 0 .636-.159.636-.478a.367.367 0 0 0-.044-.19.324.324 0 0 0-.121-.126.704.704 0 0 0-.191-.098 3.15 3.15 0 0 0-.248-.092 4.98 4.98 0 0 1-.478-.19 1.734 1.734 0 0 1-.35-.23.875.875 0 0 1-.222-.289.852.852 0 0 1-.077-.368c0-.108.024-.212.07-.311a.828.828 0 0 1 .198-.265c.085-.081.186-.148.305-.202a1.36 1.36 0 0 1 .395-.12zm2.707 0h2.597v5.192H7.788z"/></svg>

Notice that this has an outer black border (shown as white in the preview), then the originally black screen outline (shown in black), then the. black screen (shown in white) and white characters (shown in black).

This one, I feel, is closer to the original icon. What do you think?

[forsgren]

@jorgeamadosoria I agree, it was a bit tricky to find the right "feeling". To have a "solid" display area looks a bit cleaner, updated the PR with the new markup. I updated the PR with the new preview. Will keep a link to the original one as well.

[jorgeamadosoria]

@jorgeamadosoria I agree, it was a bit tricky to find the right "feeling". To have a "solid" display area looks a bit cleaner, updated the PR with the new markup. I updated the PR with the new preview. Will keep a link to the original one as well.

thank you. This one was tricky because of the gradient and because of the black screen outline. For the record I liked yours better. :)

let me check this one right now against source....

[jorgeamadosoria]

@forsgren I'm afraid that since I used a difference source than yours, My SVG does not correspond exactly to the PNG you linked from the iTerm2 repository.
I see three ways forward:

• Change the source to the one I've used. I don't like this option because your choice is the official logo, so we should probably keep it.
• Trace the svg we have now over the PNG source to make them match. I tried it, it's possible but a bit time consuming.
• Try to correct your original SVG to make it match better to the PNG file. Not sure how time consuming that would be.

Just for my information, how did you got your SVG from that source? Did you draw it, convert the PNG into SVG, or did you use some other way?

[forsgren]

@jorgeamadosoria I decided to correct the initial SVG to better match with the PNG source. The PR has been updated to reflect this.

The method I've used for creating the SVG is to manually create a SVG from scratch with the PNG as a backdrop. I've made sure that all elements in the source PNG line up with the vectorized version.

[jorgeamadosoria]

@jorgeamadosoria I decided to correct the initial SVG to better match with the PNG source. The PR has been updated to reflect this.

The method I've used for creating the SVG is to manually create a SVG from scratch with the PNG as a backdrop. I've made sure that all elements in the source PNG line up with the vectorized version.

excellent, that's much better than what I did. I'll take a look very soon.

[jorgeamadosoria]

Hi @forsgren

I still see slight mismatches in the commandline symbols. Maybe I'm not adjusting this correctly?
Can you try to overimpose your svg on top of the original PNG and see if you see the same problem?

[forsgren]

@jorgeamadosoria You are correct. I have digged around in the project source files now and found a Sketch file containing the icon in vector format. https://github.com/gnachman/iTerm2/blob/6a857f3f5872eb1465ddc0dd83412015991e79ae/images/AppIcon/iTermIcon.sketch

I've extracted the icon vector data as a SVG from that source file via the official Sketch app. No manual work this time, the logo vector data was finally found within the iTerm2 GIT repo.

[jorgeamadosoria]

Excellent! I'll be testing that when i get back online.

[jorgeamadosoria]

@jorgeamadosoria You are correct. I have digged around in the project source files now and found a Sketch file containing the icon in vector format. https://github.com/gnachman/iTerm2/blob/6a857f3f5872eb1465ddc0dd83412015991e79ae/images/AppIcon/iTermIcon.sketch

I've extracted the icon vector data as a SVG from that source file via the official Sketch app. No manual work this time, the logo vector data was finally found within the iTerm2 GIT repo.

I'm getting this.
I downloaded sketch to replicate your process. I exported the release layer as SVG, joined the paths in inkscape and overimpose the Iterm you have uploaded in this branch. I get mismatches on the $.
That's possibly because I didn't convert it in the same way you did from text to svg. How did you handled that? I converted it from text to path in Inkspace.

[jorgeamadosoria]

I think the $ are different in the sketch image and in the release PNG.

Edit: Indeed they are different. The icon in their homepage is the same as the PNG one, so I'm afraid that the .sketch file, apparently, does not translate to the released icon.
Unless you can adjust the font of the $ symbol in sketch to make it the same as the release png? That would solve all our problems.

[forsgren]

@jorgeamadosoria In your overlay it seems as if you have been missing the correct font before exporting (either that, or something else went wrong), which has lead to the $ symbol being replaced by some other font. Should be Source Code Pro Semibold according to the .sketch file.

See the attached image for an overlay of the the SVG in this PR on top of the initial source, which is the the same as the one being used in the header of the homepage. For clarity's sake I've used red for the overlay, which has 60% opacity so we can see how well it matches:

Below is the SVG overlayed on top of the header logo:

Looks like a match to me now 😌

[jorgeamadosoria]

@jorgeamadosoria In your overlay it seems as if you have been missing the correct font before exporting (either that, or something else went wrong), which has lead to the $ symbol being replaced by some other font. Should be Source Code Pro Semibold according to the .sketch file.

See the attached image for an overlay of the the SVG in this PR on top of the initial source, which is the the same as the one being used in the header of the homepage. For clarity's sake I've used red for the overlay, which has 60% opacity so we can see how well it matches:

Below is the SVG overlayed on top of the header logo:

Looks like a match to me now 😌

It's more than likely a font issue, yes. I'm not familiar with Sketch at all.
Let me try again.

[jorgeamadosoria]

I was not able to get a match with the svg in the PR. I had still a slight mismatch.
But, no matter: after installing the font (I didn't have the font, that's why the $ symbol was not matching yesterday, you were right about it) I was able to export the sketch file, remove the shadow from the border and then I got a 100% match.

So from my side, we are ready to merge. Do you want to try it on your side as well @forsgren? I'll wait for your confirmation to merge this one.

[forsgren]

I just rechecked. It seems as if the SVG was changed in a way that made it not align properly in c995f87. I have restored the file and made sure it aligns with the header PNG on the official site correctly.

Demonstration of current alignment (green tinted SVG on top of PNG):

Animation showing the current alignment

@jorgeamadosoria : The branch is now ready for merging.

[jorgeamadosoria]

I just rechecked. It seems as if the SVG was changed in a way that made it not align properly in c995f87. I have restored the file and made sure it aligns with the header PNG on the official site correctly.

Demonstration of current alignment (green tinted SVG on top of PNG):

Animation showing the current alignment

@jorgeamadosoria : The branch is now ready for merging.

yup, I got a match! LGTM.

Well, this one was complicated. thanks @forsgren for sticking out until the end!