Briefcase interface
1 .gg-briefcase { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 22px ;
7 height: 16px ;
8 border: 2px solid;
9 border-radius: 2px ;
10 margin-top: 1px 11 } 12 13 .gg-briefcase::after ,
14 .gg-briefcase::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute
19 } 20 21 .gg-briefcase::before { 22 border: 2px solid;
23 border-top-left-radius: 1px ;
24 border-top-right-radius: 1px ;
25 left: 4px ;
26 width: 10px ;
27 height: 4px ;
28 border-bottom: 0 ;
29 top: -5px 30 } 31 32 .gg-briefcase::after { 33 width: 18px ;
34 height: 3px ;
35 border-left: 7px solid transparent;
36 border-right: 7px solid transparent;
37 border-bottom: 1px solid transparent;
38 box-shadow:
39 0 2px 0 ,
40 inset 16px 74px 0 ;
41 top: 4px 42 }
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="M14 11 H10 V13 H14 V11 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M7 5 V4 C7 2.89545 7.89539 2 9 2 H15 C16.1046 2 17 2.89545 17 4 V5 H20 C21.6569 5 23 6.34314 23 8 V18 C23 19.6569 21.6569 21 20 21 H4 C2.34314 21 1 19.6569 1 18 V8 C1 6.34314 2.34314 5 4 5 H7 ZM9 4 H15 V5 H9 V4 ZM4 7 C3.44775 7 3 7.44769 3 8 V14 H21 V8 C21 7.44769 20.5522 7 20 7 H4 ZM3 18 V16 H21 V18 C21 18.5523 20.5522 19 20 19 H4 C3.44775 19 3 18.5523 3 18 Z" 13 fill="currentColor" 14 /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBriefcase = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 22px ;11 height: 16px ;12 border: 2px solid;13 border-radius: 2px ;14 margin-top: 1px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 } 23 &::before { 24 border: 2px solid;25 border-top-left-radius: 1px ;26 border-top-right-radius: 1px ;27 left: 4px ;28 width: 10px ;29 height: 4px ;30 border-bottom: 0 ;31 top: -5px ;32 } 33 &::after { 34 width: 18px ;35 height: 3px ;36 border-left: 7px solid transparent;37 border-right: 7px solid transparent;38 border-bottom: 1px solid transparent;39 box-shadow: 0 2px 0 , inset 16px 74px 0 ;40 top: 4px ;41 } 42 ` 43 44 export const Briefcase = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 45 (props, ref) => { 46 return ( 47 <> 48 <StyledBriefcase { ...props} ref={ ref} icon-role="briefcase" /> 49 </> 50 ) 51 } , 52 ) 53
Briefcase ended up a pure CSS icon built by practicing properties like: transform, width, height, border, border-radius, border-bottom, border-left, border-right, box-shadow,
