File Document interface files
1 .gg-file-document { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 16px ;
8 border: 2px solid transparent;
9 border-right: 0 ;
10 border-top: 0 ;
11 box-shadow: 0 0 0 2px ;
12 border-radius: 1px ;
13 border-top-right-radius: 4px ;
14 overflow: hidden
15 } 16 17 .gg-file-document::after ,
18 .gg-file-document::before { 19 content: "";
20 display: block;
21 box-sizing: border-box;
22 position: absolute
23 } 24 25 .gg-file-document::before { 26 background: currentColor;
27 box-shadow:
28 0 4px 0 ,
29 -6px -4px 0 ;
30 left: 0 ;
31 width: 10px ;
32 height: 2px ;
33 top: 8px 34 } 35 36 .gg-file-document::after { 37 width: 6px ;
38 height: 6px ;
39 border-left: 2px solid;
40 border-bottom: 2px solid;
41 right: -1px ;
42 top: -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 d="M7 18 H17 V16 H7 V18 Z" fill="currentColor" /> 9 <path d="M17 14 H7 V12 H17 V14 Z" fill="currentColor" /> 10 <path d="M7 10 H11 V8 H7 V10 Z" fill="currentColor" /> 11 <path 12 fill-rule="evenodd" 13 clip-rule="evenodd" 14 d="M6 2 C4.34315 2 3 3.34315 3 5 V19 C3 20.6569 4.34315 22 6 22 H18 C19.6569 22 21 20.6569 21 19 V9 C21 5.13401 17.866 2 14 2 H6 ZM6 4 H13 V9 H19 V19 C19 19.5523 18.5523 20 18 20 H6 C5.44772 20 5 19.5523 5 19 V5 C5 4.44772 5.44772 4 6 4 ZM15 4.10002 C16.6113 4.4271 17.9413 5.52906 18.584 7 H15 V4.10002 Z" 15 fill="currentColor" 16 /> 17 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledFileDocument = 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: 16px ;12 border: 2px solid transparent;13 border-right: 0 ;14 border-top: 0 ;15 box-shadow: 0 0 0 2px ;16 border-radius: 1px ;17 border-top-right-radius: 4px ;18 overflow: hidden;19 } 20 &::after , 21 &::before { 22 content: '';23 display: block;24 box-sizing: border-box;25 position: absolute;26 } 27 &::before { 28 background: currentColor;29 box-shadow: 0 4px 0 , -6px -4px 0 ;30 left: 0 ;31 width: 10px ;32 height: 2px ;33 top: 8px ;34 } 35 &::after { 36 width: 6px ;37 height: 6px ;38 border-left: 2px solid;39 border-bottom: 2px solid;40 right: -1px ;41 top: -1px ;42 } 43 ` 44 45 export const FileDocument = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 46 (props, ref) => { 47 return ( 48 <> 49 <StyledFileDocument { ...props} ref={ ref} icon-role="file-document" /> 50 </> 51 ) 52 } , 53 ) 54
File Document became a magic 100% CSS icon made by practicing features as follows: transform, width, height, border, border-right, border-top, box-shadow, border-radius, overflow, border-left, border-bottom,
