Calendar Dates interface alerts time
1 .gg-calendar-dates { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 18px ;
8 border: 2px solid;
9 border-radius: 3px 10 } 11 12 .gg-calendar-dates::after ,
13 .gg-calendar-dates::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 border-radius: 3px ;
19 height: 2px ;
20 left: 2px 21 } 22 23 .gg-calendar-dates::before { 24 background: currentColor;
25 width: 2px ;
26 box-shadow:
27 4px 0 0 ,8px 0 0 ,0 4px 0 ,
28 4px 4px 0 ,8px 4px 0 ;
29 top: 6px 30 } 31 32 .gg-calendar-dates::after { 33 width: 10px ;
34 top: -4px ;
35 box-shadow: 0 6px 0 0 36 }
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="M8 13 C7.44772 13 7 12.5523 7 12 C7 11.4477 7.44772 11 8 11 C8.55228 11 9 11.4477 9 12 C9 12.5523 8.55228 13 8 13 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M8 17 C7.44772 17 7 16.5523 7 16 C7 15.4477 7.44772 15 8 15 C8.55228 15 9 15.4477 9 16 C9 16.5523 8.55228 17 8 17 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M11 16 C11 16.5523 11.4477 17 12 17 C12.5523 17 13 16.5523 13 16 C13 15.4477 12.5523 15 12 15 C11.4477 15 11 15.4477 11 16 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M16 17 C15.4477 17 15 16.5523 15 16 C15 15.4477 15.4477 15 16 15 C16.5523 15 17 15.4477 17 16 C17 16.5523 16.5523 17 16 17 Z" 22 fill="currentColor" 23 /> 24 <path 25 d="M11 12 C11 12.5523 11.4477 13 12 13 C12.5523 13 13 12.5523 13 12 C13 11.4477 12.5523 11 12 11 C11.4477 11 11 11.4477 11 12 Z" 26 fill="currentColor" 27 /> 28 <path 29 d="M16 13 C15.4477 13 15 12.5523 15 12 C15 11.4477 15.4477 11 16 11 C16.5523 11 17 11.4477 17 12 C17 12.5523 16.5523 13 16 13 Z" 30 fill="currentColor" 31 /> 32 <path 33 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" 34 fill="currentColor" 35 /> 36 <path 37 fill-rule="evenodd" 38 clip-rule="evenodd" 39 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" 40 fill="currentColor" 41 /> 42 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCalendarDates = styled.i` 5 & { 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: 2px solid;13 border-radius: 3px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 border-radius: 3px ;22 height: 2px ;23 left: 2px ;24 } 25 &::before { 26 background: currentColor;27 width: 2px ;28 box-shadow: 4px 0 0 , 8px 0 0 , 0 4px 0 , 4px 4px 0 , 8px 4px 0 ;29 top: 6px ;30 } 31 &::after { 32 width: 10px ;33 top: -4px ;34 box-shadow: 0 6px 0 0 ;35 } 36 ` 37 38 export const CalendarDates = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledCalendarDates { ...props} ref={ ref} icon-role="calendar-dates" /> 43 </> 44 ) 45 } , 46 ) 47
Calendar Dates turned into a magic pure CSS icon created by using attributes like: transform, width, height, border, border-radius, box-shadow,
