View Month interface
1 .gg-view-month { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 border: 2px solid;
7 border-radius: 3px ;
8 width: 20px ;
9 height: 14px 10 } 11 12 .gg-view-month::after ,
13 .gg-view-month::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 width: 2px ;
19 height: 14px ;
20 top: -2px ;
21 left: 3px ;
22 background: currentColor;
23 box-shadow: 4px 0 0 ,8px 0 0 24 } 25 26 .gg-view-month::before { 27 width: 20px ;
28 height: 2px ;
29 left: -2px ;
30 top: 2px ;
31 box-shadow: 0 4px 0 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="M2 8 C2 6.34315 3.34315 5 5 5 H19 C20.6569 5 22 6.34315 22 8 V16 C22 17.6569 20.6569 19 19 19 H5 C3.34315 19 2 17.6569 2 16 V8 ZM17 7 H19 C19.5523 7 20 7.44771 20 8 V9 H17 V7 ZM15 7 H13 V9 H15 V7 ZM11 7 H9 V9 H11 V7 ZM7 7 H5 C4.44772 7 4 7.44772 4 8 V9 H7 V7 ZM4 11 V13 H7 V11 H4 ZM4 15 V16 C4 16.5523 4.44772 17 5 17 H7 V15 H4 ZM9 17 H11 V15 H9 V17 ZM13 17 H15 V15 H13 V17 ZM17 17 H19 C19.5523 17 20 16.5523 20 16 V15 H17 V17 ZM20 13 V11 H17 V13 H20 ZM11 13 H9 V11 H11 V13 ZM15 13 H13 V11 H15 V13 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledViewMonth = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 border: 2px solid;11 border-radius: 3px ;12 width: 20px ;13 height: 14px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 2px ;22 height: 14px ;23 top: -2px ;24 left: 3px ;25 background: currentColor;26 box-shadow: 4px 0 0 , 8px 0 0 ;27 } 28 &::before { 29 width: 20px ;30 height: 2px ;31 left: -2px ;32 top: 2px ;33 box-shadow: 0 4px 0 ;34 } 35 ` 36 37 export const ViewMonth = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledViewMonth { ...props} ref={ ref} icon-role="view-month" /> 42 </> 43 ) 44 } , 45 ) 46
View Month ended up a 100% CSS icon created by practicing features like: transform, border, border-radius, width, height, background, box-shadow,
