Tennis interface
1 .gg-tennis,
2 .gg-tennis::after ,
3 .gg-tennis::before { 4 display: block;
5 box-sizing: border-box;
6 border: 2px solid;
7 width: 20px ;
8 height: 20px ;
9 border-radius: 20px 10 } 11 12 .gg-tennis { 13 position: relative;
14 transform: scale(var(--ggs,1 ));
15 overflow: hidden
16 } 17 18 .gg-tennis::after ,
19 .gg-tennis::before { 20 content: "";
21 position: absolute
22 } 23 24 .gg-tennis::before { 25 left: -11px ;
26 top: -11px 27 } 28 29 .gg-tennis::after { 30 right: -11px ;
31 bottom: -11px 32 }
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="M19.0711 19.0711 C22.9763 15.1658 22.9763 8.83418 19.0711 4.92893 C15.1658 1.02369 8.83418 1.02369 4.92893 4.92893 C1.02369 8.83418 1.02369 15.1658 4.92893 19.0711 C8.83418 22.9763 15.1658 22.9763 19.0711 19.0711 ZM19.9426 11.0407 C19.7364 9.32374 18.9745 7.6608 17.6569 6.34315 C16.3343 5.0206 14.6639 4.25792 12.9402 4.0551 L12.93 4.11139 C12.1086 8.58308 8.58304 12.1086 4.11136 12.93 L4.05511 12.9402 C4.25793 14.6639 5.02061 16.3343 6.34315 17.6569 C7.66079 18.9745 9.32373 19.7364 11.0407 19.9426 C11.0449 19.9191 11.0491 19.8956 11.0534 19.8721 C11.8748 15.4004 15.4003 11.8748 19.872 11.0534 C19.8955 11.0491 19.9191 11.0449 19.9426 11.0407 ZM19.872 13.4292 V13.0951 C16.5073 13.8586 13.8586 16.5073 13.095 19.8721 H13.429 C14.9777 19.5924 16.4598 18.8539 17.6569 17.6569 C18.8539 16.4598 19.5923 14.9778 19.872 13.4292 ZM4.11136 10.8884 L4.11136 10.666 C4.37766 9.08301 5.12159 7.5647 6.34315 6.34315 C7.56465 5.12165 9.08288 4.37773 10.6658 4.11139 L10.8883 4.11139 C10.1248 7.47615 7.47612 10.1249 4.11136 10.8884 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledTennis = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 border: 2px solid;11 width: 20px ;12 height: 20px ;13 border-radius: 20px ;14 } 15 & { 16 position: relative;17 transform: scale(var(--ggs, 1 ));18 overflow: hidden;19 } 20 &::after , 21 &::before { 22 content: '';23 position: absolute;24 } 25 &::before { 26 left: -11px ;27 top: -11px ;28 } 29 &::after { 30 right: -11px ;31 bottom: -11px ;32 } 33 ` 34 35 export const Tennis = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledTennis { ...props} ref={ ref} icon-role="tennis" /> 40 </> 41 ) 42 } , 43 ) 44
Tennis developed into a wonderful pure CSS icon built by practicing features like: .gg-tennis, border, width, height, border-radius, transform, overflow,
