Import interface arrows
1 .gg-import { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 14px ;
8 border: 2px solid;
9 border-top: 0 ;
10 box-shadow:
11 -6px -8px 0 -6px ,
12 6px -8px 0 -6px 13 } 14 15 .gg-import::after ,
16 .gg-import::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute
21 } 22 23 .gg-import::before { 24 background: currentColor;
25 width: 2px ;
26 height: 14px ;
27 right: 6px ;
28 bottom: 5px 29 } 30 31 .gg-import::after { 32 width: 6px ;
33 height: 6px ;
34 border-right: 2px solid;
35 border-bottom: 2px solid;
36 right: 4px ;
37 bottom: 4px ;
38 transform: rotate(45deg )
39 }
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="M5 9.98193 V19.9819 H19 V9.98193 H15 V7.98193 H21 V21.9819 H3 V7.98193 H9 V9.98193 H5 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M13.0001 2 H11.0001 V14.0531 L8.46451 11.5175 L7.05029 12.9317 L12 17.8815 L16.9498 12.9317 L15.5356 11.5175 L13.0001 14.053 V2 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledImport = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 14px ;12 border: 2px solid;13 border-top: 0 ;14 box-shadow: -6px -8px 0 -6px , 6px -8px 0 -6px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 } 23 &::before { 24 background: currentColor;25 width: 2px ;26 height: 14px ;27 right: 6px ;28 bottom: 5px ;29 } 30 &::after { 31 width: 6px ;32 height: 6px ;33 border-right: 2px solid;34 border-bottom: 2px solid;35 right: 4px ;36 bottom: 4px ;37 transform: rotate(45deg );38 } 39 ` 40 41 export const Import = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledImport { ...props} ref={ ref} icon-role="import" /> 46 </> 47 ) 48 } , 49 ) 50
Import turned into a magic CSS icon built by adopting properties like: transform, width, height, border, border-top, box-shadow, border-right, border-bottom,
