External arrows interface
1 .gg-external { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 12px ;
7 height: 12px ;
8 box-shadow:
9 -2px 2px 0 0 ,
10 -4px -4px 0 -2px ,
11 4px 4px 0 -2px ;
12 margin-left: -2px ;
13 margin-top: 1px 14 } 15 16 .gg-external::after ,
17 .gg-external::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 right: -4px 23 } 24 25 .gg-external::before { 26 background: currentColor;
27 transform: rotate(-45deg );
28 width: 12px ;
29 height: 2px ;
30 top: 1px 31 } 32 33 .gg-external::after { 34 width: 8px ;
35 height: 8px ;
36 border-right: 2px solid;
37 border-top: 2px solid;
38 top: -4px 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="M15.6396 7.02527 H12.0181 V5.02527 H19.0181 V12.0253 H17.0181 V8.47528 L12.1042 13.3892 L10.6899 11.975 L15.6396 7.02527 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M10.9819 6.97473 H4.98193 V18.9747 H16.9819 V12.9747 H14.9819 V16.9747 H6.98193 V8.97473 H10.9819 V6.97473 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledExternal = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 12px ;11 height: 12px ;12 box-shadow: -2px 2px 0 0 , -4px -4px 0 -2px , 4px 4px 0 -2px ;13 margin-left: -2px ;14 margin-top: 1px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 right: -4px ;23 } 24 &::before { 25 background: currentColor;26 transform: rotate(-45deg );27 width: 12px ;28 height: 2px ;29 top: 1px ;30 } 31 &::after { 32 width: 8px ;33 height: 8px ;34 border-right: 2px solid;35 border-top: 2px solid;36 top: -4px ;37 } 38 ` 39 40 export const External = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledExternal { ...props} ref={ ref} icon-role="external" /> 45 </> 46 ) 47 } , 48 ) 49
External developed into an amazing pure CSS icon made by practicing attributes as follows: transform, width, height, box-shadow, border-right, border-top,
