Add magnifyWithMinus and magnifyWithPlus (aka zoom) icons

[ryankeairns]

Fixes #2045

Summary

Adds magnifyWithMinus (zoom out) and magnifyWithPlus (zoom in) icons with genericized/literal names.

Light mode

Dark mode

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[cchaos]

@ryankeairns Can you commit the icons to Abstract as well so I can view the pixel grid?

[ryankeairns]

@cchaos done! They're based on the existing Search icon, then I centered the minus and plus leaving a two pixel gap. This means they're on subpixels, but it keeps them centered and with a 1 pixel weight.

[ryankeairns]

I'll post up a version with a smaller magnifying glass where the plus/minus is not on subpixels.

[ryankeairns]

@cchaos If we're ok with shrinking the magnifying glass by a pixel, then we end up with this. By 'ok' I mean, we should probably then do the same to the existing search icon (though we don't have to).

at 16px

zoomed in for detail

[cchaos]

Yeah, I'd opt for making sure they're aligned to the pixel grid. I think ensuring readability (less fuzziness) for those without retina displays is more important than trying to match sizing with other semi-related icons. I can't imagine when the normal magnify would be used in conjunction with these. If we do see that case, we can revisit.

[cchaos]

I did notice there's a hard-corner on the smaller magnify where there was a round corner. Perhaps that can get rounded as well?

[ryankeairns]

Updated description with new screenshots; rounded off that point.

Here are the pixel-level details from Sketch:

[cchaos]

Looks great! Thanks