-
Notifications
You must be signed in to change notification settings - Fork 15
Description
So the documentation says:
Spectrum provides two sets of icons, one for desktop and one for mobile, so that the same icon doesn’t need to be manually scaled.
Your current CSS in sites/spectrum-icons.css
:
.spectrum-Icon--sizeXXS,
.spectrum-Icon--sizeXXS img,
.spectrum-Icon--sizeXXS svg {
height: 0.5625rem;
width: 0.5625rem;
}
...
And in the sites/spectrum-css/spectrum-core-lg.css
I've managed to find the sizes for mobile:
.spectrum-Icon--sizeXXS,
.spectrum-Icon--sizeXXS img,
.spectrum-Icon--sizeXXS svg {
height: 11px;
width: 11px;
}
...
However this is just CSS and you know that it's not the same as "providing 2 sets of icons" because the snapping actually means something:
Desktop icons are snapped to a full pixel, while mobile icons are snapped to up to half a pixel because of screen resolution. On rare occasions, an icon design may be off-center in order to place it exactly on a grid.
Also
Each set contains icons of different sizes such as small, medium, and large.
is not true either because you provide either 36px (in 18
folder) or 48 px (in 24
folder) and then scale them using CSS to match the resolution as best as possible, however in reality, it's job not done by the designer, who must actually provide proper SVGs of something like 18 sm / 24 me / 30 lg twice: one for desktop with full-pixel snapping and then one for mobile with half-pixel snapping in order for what you say on the website to be true.
amiwrong and what is found in 24
folder is meant to be mobile with half-pixel snapping according to
Spectrum icons come in two sizes: 18 px for desktop scale and 22 px for mobile scale.
The only 22 icons I found are limited collection of express icons in
spectrum-css-workflow-icons/dist/spectrum-css-ccx-workflow-icons/dist/22/
or was it the case that the mobile icons used to be 22 and now they are 24 and https://spectrum.adobe.com/page/iconography/ needs updating?
The problem with CSS-only scaling is that the icon will appear blurry:
This is why a different version for mobile-snapping is important however it's kind of been neglected?