Awards interface
1 .gg-awards { 2 display: block;
3 position: relative;
4 transform: scale(var(--ggs,1 ));
5 box-sizing: border-box;
6 width: 16px ;
7 height: 20px ;
8 border: 4px solid transparent;
9 border-top: 12px solid transparent;
10 border-bottom: 0 ;
11 box-shadow:
12 inset 4px 0 0 -2px ,
13 inset -4px 0 0 -2px 14 } 15 16 .gg-awards::after ,
17 .gg-awards::before { 18 content: "";
19 box-sizing: border-box;
20 position: absolute;
21 display: block;
22 border: 2px solid
23 } 24 25 .gg-awards::before { 26 width: 14px ;
27 height: 14px ;
28 border-radius: 22px ;
29 top: -12px ;
30 left: -3px 31 } 32 33 .gg-awards::after { 34 width: 6px ;
35 height: 6px ;
36 border-right-color: transparent;
37 border-bottom-color: transparent;
38 border-bottom-left-radius: 1px ;
39 border-top-right-radius: 1px ;
40 transform: rotate(45deg );
41 bottom: -3px ;
42 left: 1px 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="M19 9 C19 11.3787 17.8135 13.4804 16 14.7453 V22 H13.4142 L12 20.5858 L10.5858 22 H8 V14.7453 C6.18652 13.4804 5 11.3787 5 9 C5 5.13401 8.13401 2 12 2 C15.866 2 19 5.13401 19 9 ZM17 9 C17 11.7614 14.7614 14 12 14 C9.23858 14 7 11.7614 7 9 C7 6.23858 9.23858 4 12 4 C14.7614 4 17 6.23858 17 9 ZM10 19.7573 L12 17.7573 L14 19.7574 V15.7101 C13.3663 15.8987 12.695 16 12 16 C11.305 16 10.6337 15.8987 10 15.7101 V19.7573 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledAwards = styled.i` 5 & { 6 display: block;7 position: relative;8 transform: scale(var(--ggs, 1 ));9 box-sizing: border-box;10 width: 16px ;11 height: 20px ;12 border: 4px solid transparent;13 border-top: 12px solid transparent;14 border-bottom: 0 ;15 box-shadow: inset 4px 0 0 -2px , inset -4px 0 0 -2px ;16 } 17 &::after , 18 &::before { 19 content: '';20 box-sizing: border-box;21 position: absolute;22 display: block;23 border: 2px solid;24 } 25 &::before { 26 width: 14px ;27 height: 14px ;28 border-radius: 22px ;29 top: -12px ;30 left: -3px ;31 } 32 &::after { 33 width: 6px ;34 height: 6px ;35 border-right-color: transparent;36 border-bottom-color: transparent;37 border-bottom-left-radius: 1px ;38 border-top-right-radius: 1px ;39 transform: rotate(45deg );40 bottom: -3px ;41 left: 1px ;42 } 43 ` 44 45 export const Awards = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 46 (props, ref) => { 47 return ( 48 <> 49 <StyledAwards { ...props} ref={ ref} icon-role="awards" /> 50 </> 51 ) 52 } , 53 ) 54
Awards became a magic CSS icon created by using properties as follows: transform, width, height, border, border-top, border-bottom, box-shadow, border-radius, border-right-color, border-bottom-color,
