Notes content interface
1 .gg-notes { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 22px ;
8 border: 2px solid;
9 border-radius: 3px 10 } 11 12 .gg-notes::after ,
13 .gg-notes::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 border-radius: 3px ;
19 height: 2px ;
20 background: currentColor;
21 left: 2px 22 } 23 24 .gg-notes::before { 25 box-shadow:
26 0 4px 0 ,
27 0 8px 0 ;
28 width: 12px ;
29 top: 2px 30 } 31 32 .gg-notes::after { 33 width: 6px ;
34 top: 14px 35 }
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="M6 6 C6 5.44772 6.44772 5 7 5 H17 C17.5523 5 18 5.44772 18 6 C18 6.55228 17.5523 7 17 7 H7 C6.44771 7 6 6.55228 6 6 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M6 10 C6 9.44771 6.44772 9 7 9 H17 C17.5523 9 18 9.44771 18 10 C18 10.5523 17.5523 11 17 11 H7 C6.44771 11 6 10.5523 6 10 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M7 13 C6.44772 13 6 13.4477 6 14 C6 14.5523 6.44771 15 7 15 H17 C17.5523 15 18 14.5523 18 14 C18 13.4477 17.5523 13 17 13 H7 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M6 18 C6 17.4477 6.44772 17 7 17 H11 C11.5523 17 12 17.4477 12 18 C12 18.5523 11.5523 19 11 19 H7 C6.44772 19 6 18.5523 6 18 Z" 22 fill="currentColor" 23 /> 24 <path 25 fill-rule="evenodd" 26 clip-rule="evenodd" 27 d="M2 4 C2 2.34315 3.34315 1 5 1 H19 C20.6569 1 22 2.34315 22 4 V20 C22 21.6569 20.6569 23 19 23 H5 C3.34315 23 2 21.6569 2 20 V4 ZM5 3 H19 C19.5523 3 20 3.44771 20 4 V20 C20 20.5523 19.5523 21 19 21 H5 C4.44772 21 4 20.5523 4 20 V4 C4 3.44772 4.44771 3 5 3 Z" 28 fill="currentColor" 29 /> 30 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledNotes = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 20px ;11 height: 22px ;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 background: currentColor;24 left: 2px ;25 } 26 &::before { 27 box-shadow: 0 4px 0 , 0 8px 0 ;28 width: 12px ;29 top: 2px ;30 } 31 &::after { 32 width: 6px ;33 top: 14px ;34 } 35 ` 36 37 export const Notes = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledNotes { ...props} ref={ ref} icon-role="notes" /> 42 </> 43 ) 44 } , 45 ) 46
Notes turned into a magic 100% CSS icon created by applying attributes such as: transform, width, height, border, border-radius, background,
