Add Web Components

[davidklebanoff]

Issue: #1180

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

Everything about this particular pull request was non-ideal. I'll walk you through my decisions, but I don't think there are good answers for any of them.

• Name - I chose Web Components, but one could are just as easily that the name should be WebComponents.org or webcomponents.org
• Icon - The Web Components logo is largely composed of gradients, which doesn't translate well to a clear monochrome icon when everything was merged together (I tried). It has weird little cutouts that I don't think represent the brand well. I ended up extracting an icon from the homepage that doesn't have the cutouts, but otherwise looks like the logo.
• Color - I wasn't able to identify an official brand color, so I choose the dark, almost black color, in the logo as it was the largest portion of the logo. Additionally, the other colors (blue and green) were gradients without a clearly identifiable color. The color I used was extracted from the official SVG logo.

[birjj]

• Name - I chose Web Components, but one could are just as easily that the name should be WebComponents.org or webcomponents.org

Looks like they refer to themselves as either "webcomponents.org" or "WebComponents.org", but most often full lowercase. The GitHub organization is named "Web Components", but that's just about the only place I could find it without .org. I'd personally prefer using the lowercase .org variant.

• Icon - [...] It has weird little cutouts that I don't think represent the brand well. I ended up extracting an icon from the homepage that doesn't have the cutouts, but otherwise looks like the logo.

I personally think the folding ribbon is an important part of the logo, and removing it would make it more difficult to associate.

There definitely is better ways to monochromize a folding ribbon, but I'd rather stick to the official sources.

^{(on a sidenote I couldn't find the version you talked about without the cutouts - if you're talking about "Custom Elements", that's not quite the same as Web Components)}

• Color - I wasn't able to identify an official brand color, so I choose the dark, almost black color, in the logo as it was the largest portion of the logo.

Personally I don't associate near-black with the brand based on their logo (or website). The blue or green are simply more visually dominant. I would've probably used the blue since they seem to use a blue as their dominant color on their homepage (although that is a different blue than their logo), but in the logo the green is just as dominant to my eyes. Their theme colors as defined in CSS are

catalog-app {
    --theme-yellow: #E6F616;
    --theme-green: #8EDB69;
    --theme-navy: #226392;
    --theme-blue: #37A0CE; /* this one is primarily used on their homepage */
    --theme-blue-small: #027cb1;
    --theme-blue-grey: #697785;
    --theme-black: #2D2F31;
    --theme-accent-1: #6dc38f;
    --theme-blue-dark: #1f9bb9;
}

The gradients in their logo go from #2A3B8F to #29ABE2 (#166DA5 when behind), and from #B4D44E to #E7F716 (#8FDB69 when behind).

Picking colors from gradients is always subjective, but I'd probably use either #29ABE2 or #B4D44E for the sake of using official colors. I can of course be convinced otherwise.

[davidklebanoff]

Updated! I also corrected the official SVG's tiny gap you see in the bottom left.

[ericcornelissen]

Looks good in the end @davidklebanoff 👌 I agree with your final choice of color as their website uses more blue than green.