File Add files interface
1 .gg-file-add { 2 background:
3 linear-gradient(to bottom,
4 currentColor 5px ,transparent 0 )
5 no-repeat 2px 9px /6px 2px ;
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 21 .gg-file-add::after ,
22 .gg-file-add::before { 23 content: "";
24 display: block;
25 box-sizing: border-box;
26 position: absolute;
27 height: 6px 28 } 29 30 .gg-file-add::before { 31 background: currentColor;
32 left: 4px ;
33 width: 2px ;
34 top: 7px 35 } 36 37 .gg-file-add::after { 38 width: 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="M10 18 V16 H8 V14 H10 V12 H12 V14 H14 V16 H12 V18 H10 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 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" 13 fill="currentColor" 14 /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledFileAdd = styled.i` 5 & { 6 background: linear-gradient(to bottom, currentColor 5px , transparent 0 ) no-repeat 2px 9px /6px 7 2px ; 8 box-sizing: border-box;9 position: relative;10 display: block;11 transform: scale(var(--ggs, 1 ));12 width: 14px ;13 height: 16px ;14 border: 2px solid transparent;15 border-right: 0 ;16 border-top: 0 ;17 box-shadow: 0 0 0 2px ;18 border-radius: 1px ;19 border-top-right-radius: 4px ;20 overflow: hidden;21 } 22 &::after , 23 &::before { 24 content: '';25 display: block;26 box-sizing: border-box;27 position: absolute;28 height: 6px ;29 } 30 &::before { 31 background: currentColor;32 left: 4px ;33 width: 2px ;34 top: 7px ;35 } 36 &::after { 37 width: 6px ;38 border-left: 2px solid;39 border-bottom: 2px solid;40 right: -1px ;41 top: -1px ;42 } 43 ` 44 45 export const FileAdd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 46 (props, ref) => { 47 return ( 48 <> 49 <StyledFileAdd { ...props} ref={ ref} icon-role="file-add" /> 50 </> 51 ) 52 } , 53 ) 54
File Add is a wonderful pure CSS icon built by adopting properties as follows: background, transform, width, height, border, border-right, border-top, box-shadow, border-radius, overflow, border-left, border-bottom,
