Stopwatch interface devices time
1 .gg-stopwatch { 2 background:
3 linear-gradient(to left,
4 currentColor 7px ,transparent 0 )
5 no-repeat 6px 2px /2px 6px ;
6 box-sizing: border-box;
7 position: relative;
8 display: block;
9 transform: scale(var(--ggs,1 ));
10 width: 18px ;
11 height: 18px ;
12 border-radius: 100% ;
13 border: 2px solid transparent;
14 box-shadow: 0 0 0 2px 15 } 16 17 .gg-stopwatch::after { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 width: 4px ;
23 height: 2px ;
24 background: currentColor;
25 transform: rotate(45deg );
26 right: -4px ;
27 top: -3px 28 }
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="M18.6214 2.55029 L21.4498 5.37872 L20.0356 6.79293 L17.2071 3.96451 L18.6214 2.55029 Z" 10 fill="currentColor" 11 /> 12 <path d="M12.8225 8.60055 H10.8225 V12.6005 H12.8225 V8.60055 Z" fill="currentColor" /> 13 <path 14 fill-rule="evenodd" 15 clip-rule="evenodd" 16 d="M5.18633 18.8137 C8.70105 22.3285 14.3995 22.3285 17.9143 18.8137 C21.429 15.299 21.429 9.60055 17.9143 6.08583 C14.3995 2.57111 8.70105 2.57111 5.18633 6.08583 C1.67161 9.60054 1.67161 15.299 5.18633 18.8137 ZM6.60054 17.3995 C9.33422 20.1332 13.7664 20.1332 16.5 17.3995 C19.2337 14.6659 19.2337 10.2337 16.5 7.50004 C13.7664 4.76637 9.33422 4.76637 6.60054 7.50004 C3.86688 10.2337 3.86688 14.6659 6.60054 17.3995 Z" 17 fill="currentColor" 18 /> 19 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledStopwatch = styled.i` 5 & { 6 background: linear-gradient(to left, currentColor 7px , transparent 0 ) no-repeat 6px 2px /2px 6px ;7 box-sizing: border-box;8 position: relative;9 display: block;10 transform: scale(var(--ggs, 1 ));11 width: 18px ;12 height: 18px ;13 border-radius: 100% ;14 border: 2px solid transparent;15 box-shadow: 0 0 0 2px ;16 } 17 &::after { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 4px ;23 height: 2px ;24 background: currentColor;25 transform: rotate(45deg );26 right: -4px ;27 top: -3px ;28 } 29 ` 30 31 export const Stopwatch = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledStopwatch { ...props} ref={ ref} icon-role="stopwatch" /> 36 </> 37 ) 38 } , 39 ) 40
Stopwatch ended up a wonderful pure CSS icon created by practicing attributes like: background, transform, width, height, border-radius, border, box-shadow, background,
