Closed cbirdsong closed 1 year ago
https://github.com/ndiego/icon-block/blob/611a4f9624c556b04e88ed5daf4475c214eb3c2b/src/index.scss#L53 It's true! You could do this:
&.rotate-90, .rotate-90 { svg { rotate: 90deg; } } &.rotate-180, .rotate-180 { svg { rotate: 180deg; } } &.rotate-270, .rotate-270 { svg { rotate: 270deg; } } &.flip-horizontal, .flip-horizontal { svg { scale: -1 1; } } &.flip-vertical, .flip-vertical { svg { scale: 1 -1; } } &.flip-vertical.flip-horizontal, .flip-vertical.flip-horizontal { svg { scale: -1 -1; } }
However, the rotate and scale CSS properties have much less browser support (~90%) compared to transform (~98%).
This PR uses custom properties instead:
svg { transform: rotate(var(--outermost--icon-transform-rotate, 0deg)) scaleX(var(--outermost--icon-transform-scale-x, 1)) scaleY(var(--outermost--icon-transform-scale-y, 1)); } &.rotate-90, .rotate-90 { --outermost--icon-transform-rotate: 90deg; } &.rotate-180, .rotate-180 { --outermost--icon-transform-rotate: 180deg; } &.rotate-270, .rotate-270 { --outermost--icon-transform-rotate: 270deg; } &.flip-horizontal, .flip-horizontal { --outermost--icon-transform-scale-x: -1; } &.flip-vertical, .flip-vertical { --outermost--icon-transform-scale-y: -1; } &.flip-vertical.flip-horizontal, .flip-vertical.flip-horizontal { --outermost--icon-transform-scale-x: -1; --outermost--icon-transform-scale-y: -1; }
They are much better supported (~96%) and are also used heavily in the editor CSS. This reduces the CSS sent to the front end by 40%, which sounds more impressive than "1,212 bytes".
https://github.com/ndiego/icon-block/blob/611a4f9624c556b04e88ed5daf4475c214eb3c2b/src/index.scss#L53 It's true! You could do this:
However, the rotate and scale CSS properties have much less browser support (~90%) compared to transform (~98%).
This PR uses custom properties instead:
They are much better supported (~96%) and are also used heavily in the editor CSS. This reduces the CSS sent to the front end by 40%, which sounds more impressive than "1,212 bytes".