Apple Watch devices time
1 .gg-apple-watch { 2 background:
3 linear-gradient( to left,
4 currentColor 5px ,transparent 0 )
5 no-repeat 13px 4px /2px 4px ;
6 box-sizing: border-box;
7 position: relative;
8 display: block;
9 width: 24px ;
10 height: 24px ;
11 border: 5px solid transparent;
12 transform: scale(var(--ggs,1 ));
13 border-radius: 9px ;
14 box-shadow: inset 0 0 0 2px 15 } 16 17 .gg-apple-watch::after ,
18 .gg-apple-watch::before { 19 content: "";
20 display: block;
21 box-sizing: border-box;
22 position: absolute;
23 border-radius: 3px ;
24 width: 10px ;
25 height: 5px ;
26 border: 2px solid;
27 border-bottom: 0 ;
28 border-bottom-left-radius: 0 ;
29 border-bottom-right-radius: 0 ;
30 left: 2px 31 } 32 33 .gg-apple-watch::after { 34 top: -3px 35 } 36 37 .gg-apple-watch::before { 38 transform: scaleY(-1 );
39 top: 12px 40 }
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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M16.4975 5.02988 C16.4973 5.07798 16.4959 5.12581 16.4934 5.17335 C17.662 5.58332 18.5 6.69628 18.5 8.00496 V9.00493 H19.5 V13.0049 H18.5 V16.005 C18.5 17.3129 17.663 18.4254 16.4953 18.8359 C16.4984 18.8919 16.5 18.9482 16.5 19.005 C16.5 20.6618 15.1569 22.005 13.5 22.005 H9.5 C7.84315 22.005 6.5 20.6618 6.5 19.005 C6.5 18.9482 6.50158 18.8919 6.50468 18.8359 C5.33705 18.4254 4.5 17.3129 4.5 16.005 V8.00496 C4.5 6.69767 5.33618 5.58568 6.50286 5.17465 C6.49907 5.11032 6.4973 5.04546 6.49763 4.98011 C6.50587 3.32328 7.85569 1.98683 9.51252 1.99508 L13.5125 2.01499 C15.1693 2.02324 16.5058 3.37305 16.4975 5.02988 ZM8.49764 5.00496 H14.4975 C14.4922 4.45954 14.0498 4.01769 13.5025 4.01496 L9.50257 3.99505 C8.95029 3.99231 8.50035 4.43779 8.4976 4.99006 L8.49764 5.00496 ZM15.7049 7.02596 L11.4846 7.00496 H7.5 C6.94772 7.00496 6.5 7.45267 6.5 8.00496 V16.005 C6.5 16.5568 6.94696 17.0042 7.4986 17.005 H15.5014 C16.053 17.0042 16.5 16.5568 16.5 16.005 V8.00496 C16.5 7.52289 16.1589 7.12049 15.7049 7.02596 ZM8.5 19.005 C8.5 19.5572 8.94772 20.005 9.5 20.005 H13.5 C14.0523 20.005 14.5 19.5572 14.5 19.005 H8.5 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledAppleWatch = styled.i` 5 & { 6 background: linear-gradient(to left, currentColor 5px , transparent 0 ) no-repeat 13px 4px /2px 4px ;7 box-sizing: border-box;8 position: relative;9 display: block;10 width: 24px ;11 height: 24px ;12 border: 5px solid transparent;13 transform: scale(var(--ggs, 1 ));14 border-radius: 9px ;15 box-shadow: inset 0 0 0 2px ;16 } 17 &::after , 18 &::before { 19 content: '';20 display: block;21 box-sizing: border-box;22 position: absolute;23 border-radius: 3px ;24 width: 10px ;25 height: 5px ;26 border: 2px solid;27 border-bottom: 0 ;28 border-bottom-left-radius: 0 ;29 border-bottom-right-radius: 0 ;30 left: 2px ;31 } 32 &::after { 33 top: -3px ;34 } 35 &::before { 36 transform: scaleY(-1 );37 top: 12px ;38 } 39 ` 40 41 export const AppleWatch = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledAppleWatch { ...props} ref={ ref} icon-role="apple-watch" /> 46 </> 47 ) 48 } , 49 ) 50
Apple Watch developed into a pure CSS icon created by applying properties as follows: background, width, height, border, transform, border-radius, box-shadow, border-bottom,
