Allow color logos for the various SVG versions

[jasmussen]

With an SVG icon, you can change the color of the whole icon with fill, so it doesn't matter what color the individual files are born with.

For some logos, like Google Photos, it's really important they have color. We should see if there's a way to make the scripts not strip out color attributes, if not for all logos, then at least optionally for some of them.

Here's a Google Photos logo, for example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path fill="#4285F4" d="M95 48H58l-7 3-3 7v15h25l22.7-23.3c.2-.2.3-.4.3-.7 0-.5-.5-1-1-1z"/><title>Group</title><path fill="#FFBC00" d="M48 38V23H23L.3 46.3c-.2.2-.3.4-.3.7 0 .5.5 1 1 1h37l7-3 3-7z"/><path fill="#FF9800" d="M48 38V23H23l22 22"/><path fill="#DB4437" d="M49.7.3c-.2-.2-.4-.3-.7-.3-.5 0-1 .5-1 1v37l3 7 7 3h15V23L49.7.3z"/><path fill="#AD1457" d="M51 45l7 3h15V23"/><path fill="#3367D6" d="M51 51l-3 7v15h25"/><path fill="#8BC34A" d="M38 48H23v25l23.3 22.7c.2.2.4.3.7.3.5 0 1-.5 1-1V58l-3-7-7-3z"/><path fill="#0F9D58" d="M23 48v25l22-22-7-3"/></svg>

[davewhitley]

Missed this. Maybe I'll hook this repo into Slack.

I suppose, this would be ok, although I personally think of this repository as a group of single color "icons", but maybe it could expand to include logos like this. I would consider just using the standard Google logo for this, until the feature is shipped.

We would need to clearly state when it would be appropriate to use a multi-color logo. For example, only include if there is no other alternative. We also don't want a colored version for each logo in the repo.

@folletto what do you think?

[pento]

This would also be helpful for the Social Login project - for example, Automattic/wp-calypso#15542 requires the multi-coloured Google logo, so I'm just pasting an entire SVG into place. Using <SocialLogo> would be so much nicer.

[folletto]

I think it's important as some brand guidelines require the logo to be colored in some or all instances – as @pento pointed out, here's the Google guidelines detailing the requirement.

I think the main thing here is to make explicit the difference, and why it's done in a specific way.

Assumptions:

• Assumption 1 — every logo should have a monochrome version, so the colored one is an "extra".
• Assumption 2 — the default remains monochrome.

So we could:

1. (fix the build system to align with Gridicons, as this is an older version, not required but...).
2. Create sub-folder of the current icon set /sources/svg/color.
3. Minify that too, and make it accessible with a React prop like color="true".

Downside of this: icons with color alternatives are duplicated. We might fill them by default but seems a bit heavy handed?

Would be nice if we could "warn" in some way when the monochrome icon is used if it has also a color alternative, but seems hard to do without adding too much clutter in the logs.

[jasmussen]

Great discussion here. Good points all around.

Regarding the technicality of this — we could do as little as not strip out the color of the SVGs.

We'd still be able to override the color, make it monochrome. But if we wanted the colors to "shine through", we could let them.

No strong opinion on this though.

[folletto]

Yeah, that starts on different assumptions. If we do that, I wonder if it would make more sense to DEFAULT to all colored, and then allow override?

[davewhitley]

Maybe we 'bake' the brand color into each logo (even if it's just one color), and it'll be up to the user of the icons to make all of the icons a uniform color (fill: currentColor). In other words, the default is colored.

[jasmussen]

Maybe we 'bake' the brand color into each logo (even if it's just one color), and it'll be up to the user of the icons to make all of the icons a uniform color (fill: currentColor). In other words, the default is colored.

This was the gist of my initial idea in this ticket. We can even let the default be monochrome, so you'd have to unstyle a logo (inherit) to get the colors out.

The only thing we'd need to do, is ensure that colors aren't stripped out from the SVGs during the minification process.

[folletto]

To facilitate this, I did a further refactoring to the build process in Gridicons, so we can parametrize what gets transformed and how better, and also move the files around: https://github.com/Automattic/gridicons/pull/241

I think the current removal of styling is done by svgmin, which happens fairly early. If we merge ⌗241, I can look into porting the same build process here too, while removing the svgmin attribute. The two aren't strictly related, but I think that if the repositories start to diverge, it's better if we are able to more clearly see where the divergence is.

[stephanethomas]

We're currently integrating Google My Business into WordPress.com, and as such will have to display the Google My Business logo. Right now we're just using an image file, but I was wondering if we're still thinking of refactoring Social Logos to accept colored logos, or if we should find another place for locating such logos (we're planning on integrating more Google services in the near future).

[folletto]

I think there has been no update to the discussion above. My take is:

1. We should probably do it.
2. We need to find a solid build system to avoid duplication, code bloat, and make maintenance easy.