Calendar Next arrows time alerts interface
1 .gg-calendar-next { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 14px ;
8 border: 2px solid transparent;
9 border-bottom: 4px solid transparent;
10 border-right: 4px solid transparent;
11 border-left: 3px solid transparent;
12 box-shadow:
13 0 0 0 2px ,
14 inset 0 -2px 0 ;
15 border-radius: 1px 16 } 17 18 .gg-calendar-next::after ,
19 .gg-calendar-next::before { 20 content: "";
21 display: block;
22 box-sizing: border-box;
23 position: absolute
24 } 25 26 .gg-calendar-next::before { 27 background: currentColor;
28 border-radius: 2px ;
29 top: 0 ;
30 left: -1px ;
31 width: 10px ;
32 height: 2px 33 } 34 35 .gg-calendar-next::after { 36 width: 0 ;
37 height: 0 ;
38 border-top: 3px solid transparent;
39 border-bottom: 3px solid transparent;
40 border-left: 5px solid;
41 bottom: -2px ;
42 right: -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 d="M11.7249 16.5461 L16.2249 13.9481 L11.7249 11.35 V12.9481 H7.7749 V14.9481 H11.7249 V16.5461 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M8 7 C7.44772 7 7 7.44772 7 8 C7 8.55228 7.44772 9 8 9 H16 C16.5523 9 17 8.55228 17 8 C17 7.44772 16.5523 7 16 7 H8 Z" 14 fill="currentColor" 15 /> 16 <path 17 fill-rule="evenodd" 18 clip-rule="evenodd" 19 d="M6 3 C4.34315 3 3 4.34315 3 6 V18 C3 19.6569 4.34315 21 6 21 H18 C19.6569 21 21 19.6569 21 18 V6 C21 4.34315 19.6569 3 18 3 H6 ZM18 5 H6 C5.44772 5 5 5.44772 5 6 V18 C5 18.5523 5.44772 19 6 19 H18 C18.5523 19 19 18.5523 19 18 V6 C19 5.44772 18.5523 5 18 5 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCalendarNext = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 14px ;12 border: 2px solid transparent;13 border-bottom: 4px solid transparent;14 border-right: 4px solid transparent;15 border-left: 3px solid transparent;16 box-shadow: 0 0 0 2px , inset 0 -2px 0 ;17 border-radius: 1px ;18 } 19 &::after , 20 &::before { 21 content: '';22 display: block;23 box-sizing: border-box;24 position: absolute;25 } 26 &::before { 27 background: currentColor;28 border-radius: 2px ;29 top: 0 ;30 left: -1px ;31 width: 10px ;32 height: 2px ;33 } 34 &::after { 35 width: 0 ;36 height: 0 ;37 border-top: 3px solid transparent;38 border-bottom: 3px solid transparent;39 border-left: 5px solid;40 bottom: -2px ;41 right: -2px ;42 } 43 ` 44 45 export const CalendarNext = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 46 (props, ref) => { 47 return ( 48 <> 49 <StyledCalendarNext { ...props} ref={ ref} icon-role="calendar-next" /> 50 </> 51 ) 52 } , 53 ) 54
Calendar Next became a wonderful pure CSS icon created by adopting attributes as follows: transform, width, height, border, border-bottom, border-right, border-left, box-shadow, border-radius, border-top,
