Windows brands
1 .gg-windows { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-windows,
6 .gg-windows::before { 7 display: block;
8 position: relative;
9 box-sizing: border-box;
10 width: 17px ;
11 height: 15px 12 } 13 14 .gg-windows::before { 15 content: "";
16 position: absolute;
17 width: 7px ;
18 height: 6px ;
19 background: currentColor;
20 box-shadow: 8px 0 0 ,8px 7px 0 ,0 7px 0 ;
21 transform: perspective(30px ) rotateY(-30deg )
22 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 d="M3 5.5485 L10.1954 4.58174 V11.6106 L3.00672 11.6651 L3 5.5485 ZM10.1954 12.3909 V19.4957 L3.00571 18.5105 L3.0053 12.3909 H10.1954 ZM11.1134 4.45599 L20.9977 3 V11.5334 L11.1134 11.6106 V4.45599 ZM21 12.505 L20.9977 21 L11.1134 19.6466 V12.505 H21 Z" 10 fill="currentColor" 11 /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledWindows = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::before { 10 display: block;11 position: relative;12 box-sizing: border-box;13 width: 17px ;14 height: 15px ;15 } 16 &::before { 17 content: '';18 position: absolute;19 width: 7px ;20 height: 6px ;21 background: currentColor;22 box-shadow: 8px 0 0 , 8px 7px 0 , 0 7px 0 ;23 transform: perspective(30px ) rotateY(-30deg );24 } 25 ` 26 27 export const Windows = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 28 (props, ref) => { 29 return ( 30 <> 31 <StyledWindows { ...props} ref={ ref} icon-role="windows" /> 32 </> 33 ) 34 } , 35 ) 36
Windows became a wonderful CSS icon made by applying properties such as: transform, width, height, background, box-shadow, transform,
