search

mozilla / protocol-assets

Design assets for Protocol, Mozilla’s design system.
https://protocol.mozilla.org/
Mozilla Public License 2.0
11 stars 8 forks source link

Fix dimensions for newer social icons #93

Open janbrasna opened 5 months ago

janbrasna commented 5 months ago

The SVG icons either need to be at 16px (like fx, fb, ig, gh, pocket…) or if 24px or any other size (e.g. spotify, tiktok & mastodon) only the viewBox without width and height must be present to work in bedrock footer background-image in WebKit.

Mastodon SVG icons are the only ones in 24px that also declare dimensions, making migration to protocol_assets buggy:

Screenshot 2024-04-17 at 21 09 49

(PoC: https://github.com/janbrasna/bedrock/commit/5653020562e1714f6fb5a61c59c81aa4d91d56b7)

Leaving out the dimensions fixes this and enables removal of the local overrides in footer.

craigcook commented 3 months ago

I think whichever size we choose, either 16x16 or 24x24, we should be consistent across all of them. I tend to include width and height in addition to viewBox so it still has a "natural" size when its viewed on its own. So maybe we should resize Mastodon to 16 x 16 and keep the dimension attributes, and do the same for the others that are 24 x 24.

janbrasna commented 3 months ago

Even better! I think the original icons' 16px form factor w/ explicit dimensions is a good idea to match for consistency — I'll make all the newer social icons that size too.

I originally didn't want to resize or otherwise touch the shapes so this felt like a quick fix, but it's sorted out downstream for now with bg contain so there's no pressure and we can fixup all of them…