Performance interface
1 .gg-performance { 2 background:
3 linear-gradient(to left,
4 currentColor 8px ,transparent 0 )
5 no-repeat center/2px 6px ;
6 box-sizing: border-box;
7 position: relative;
8 display: block;
9 transform: scale(var(--ggs,1 ));
10 width: 22px ;
11 height: 22px ;
12 border: 2px solid;
13 border-radius: 100px 14 } 15 16 .gg-performance::after ,
17 .gg-performance::before { 18 content: "";
19 display: block;
20 position: absolute;
21 border: 2px solid
22 } 23 24 .gg-performance::before { 25 bottom: 2px ;
26 width: 2px ;
27 height: 2px ;
28 box-sizing: content-box;
29 border-radius: 100px ;
30 left: 6px 31 } 32 33 .gg-performance::after { 34 box-sizing: border-box;
35 border-radius: 3px ;
36 width: 14px ;
37 height: 8px ;
38 border-top-left-radius: 100px ;
39 border-top-right-radius: 100px ;
40 border-bottom: 0 ;
41 top: 2px ;
42 left: 2px 43 }
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="M11 9 V13.1707 C9.83481 13.5825 9 14.6938 9 16 C9 17.6569 10.3431 19 12 19 C13.6569 19 15 17.6569 15 16 C15 14.6938 14.1652 13.5825 13 13.1707 V9 H11 ZM11 16 C11 15.4477 11.4477 15 12 15 C12.5523 15 13 15.4477 13 16 C13 16.5523 12.5523 17 12 17 C11.4477 17 11 16.5523 11 16 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M12 5 C15.866 5 19 8.13401 19 12 V13 H17 V12 C17 9.23858 14.7614 7 12 7 C9.23858 7 7 9.23858 7 12 V13 H5 V12 C5 8.13401 8.13401 5 12 5 Z" 16 fill="currentColor" 17 /> 18 <path 19 fill-rule="evenodd" 20 clip-rule="evenodd" 21 d="M12 23 C18.0751 23 23 18.0751 23 12 C23 5.92487 18.0751 1 12 1 C5.92487 1 1 5.92487 1 12 C1 18.0751 5.92487 23 12 23 ZM12 21 C16.9706 21 21 16.9706 21 12 C21 7.02944 16.9706 3 12 3 C7.02944 3 3 7.02944 3 12 C3 16.9706 7.02944 21 12 21 Z" 22 fill="currentColor" 23 /> 24 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPerformance = styled.i` 5 & { 6 background: linear-gradient(to left, currentColor 8px , transparent 0 ) no-repeat center/2px 6px ;7 box-sizing: border-box;8 position: relative;9 display: block;10 transform: scale(var(--ggs, 1 ));11 width: 22px ;12 height: 22px ;13 border: 2px solid;14 border-radius: 100px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 position: absolute;21 border: 2px solid;22 } 23 &::before { 24 bottom: 2px ;25 width: 2px ;26 height: 2px ;27 box-sizing: content-box;28 border-radius: 100px ;29 left: 6px ;30 } 31 &::after { 32 box-sizing: border-box;33 border-radius: 3px ;34 width: 14px ;35 height: 8px ;36 border-top-left-radius: 100px ;37 border-top-right-radius: 100px ;38 border-bottom: 0 ;39 top: 2px ;40 left: 2px ;41 } 42 ` 43 44 export const Performance = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 45 (props, ref) => { 46 return ( 47 <> 48 <StyledPerformance { ...props} ref={ ref} icon-role="performance" /> 49 </> 50 ) 51 } , 52 ) 53
Performance developed into a wonderful pure CSS icon built by applying properties like: background, transform, width, height, border, border-radius, border-bottom,
