Toolbox files interface
1 .gg-toolbox { 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 } 11 12 .gg-toolbox::after ,
13 .gg-toolbox::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute
18 } 19 20 .gg-toolbox::before { 21 border: 2px solid;
22 border-bottom: 0 ;
23 border-top-left-radius: 3px ;
24 border-top-right-radius: 3px ;
25 left: 4px ;
26 width: 10px ;
27 height: 4px ;
28 top: -5px 29 } 30 31 .gg-toolbox::after { 32 width: 18px ;
33 height: 2px ;
34 border-left: 4px solid transparent;
35 border-right: 4px solid transparent;
36 box-shadow:
37 0 -2px 0 ,
38 inset 4px 0 0 ,
39 inset -4px 0 0 ;
40 top: 4px 41 }
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="M17 5.5 H20 C21.1046 5.5 22 6.39543 22 7.5 V19.5 C22 20.6046 21.1046 21.5 20 21.5 H4 C2.89543 21.5 2 20.6046 2 19.5 V7.5 C2 6.39543 2.89543 5.5 4 5.5 H7 C7 3.84315 8.34315 2.5 10 2.5 H14 C15.6569 2.5 17 3.84315 17 5.5 ZM14 4.5 H10 C9.44772 4.5 9 4.94772 9 5.5 H15 C15 4.94772 14.5523 4.5 14 4.5 ZM20 7.5 H4 V9.5 H20 V7.5 ZM4 19.5 V11.5 H7 V13.5 H11 V11.5 H13 V13.5 H17 V11.5 H20 V19.5 H4 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledToolbox = 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 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 } 22 &::before { 23 border: 2px solid;24 border-bottom: 0 ;25 border-top-left-radius: 3px ;26 border-top-right-radius: 3px ;27 left: 4px ;28 width: 10px ;29 height: 4px ;30 top: -5px ;31 } 32 &::after { 33 width: 18px ;34 height: 2px ;35 border-left: 4px solid transparent;36 border-right: 4px solid transparent;37 box-shadow: 0 -2px 0 , inset 4px 0 0 , inset -4px 0 0 ;38 top: 4px ;39 } 40 ` 41 42 export const Toolbox = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 43 (props, ref) => { 44 return ( 45 <> 46 <StyledToolbox { ...props} ref={ ref} icon-role="toolbox" /> 47 </> 48 ) 49 } , 50 ) 51
Toolbox ended up an amazing 100% CSS icon created by adopting attributes such as: transform, width, height, border, border-radius, border-bottom, border-left, border-right, box-shadow,
