Arrows Expand Left Alt interface arrows
1 .gg-arrows-expand-left-alt { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 14px ;
8 margin: 2px ;
9 box-shadow:
10 6px 6px 0 -4px ,
11 -6px -6px 0 -4px 12 } 13 14 .gg-arrows-expand-left-alt::after ,
15 .gg-arrows-expand-left-alt::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 transform: rotate(-45deg )
21 } 22 23 .gg-arrows-expand-left-alt::before { 24 width: 2px ;
25 height: 22px ;
26 top: -4px ;
27 left: 6px ;
28 border-top: 9px solid;
29 border-bottom: 9px solid
30 } 31 32 .gg-arrows-expand-left-alt::after { 33 width: 8px ;
34 height: 2px ;
35 background: currentColor;
36 top: 6px ;
37 left: 3px 38 }
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="M10.1005 2.10052 V4.10052 H5.51471 L11.293 9.87878 L9.87875 11.293 L4.10046 5.51471 L4.10046 10.1005 H2.10046 L2.10046 2.10052 H10.1005 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M21.8995 13.8995 H19.8995 V18.4853 L14.1212 12.707 L12.707 14.1213 L18.4853 19.8995 H13.8995 V21.8995 H21.8995 V13.8995 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M16.2426 9.1716 L14.8284 7.75739 L7.7573 14.8285 L9.17151 16.2427 L16.2426 9.1716 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledArrowsExpandLeftAlt = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 14px ;12 margin: 2px ;13 box-shadow: 6px 6px 0 -4px , -6px -6px 0 -4px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 transform: rotate(-45deg );22 } 23 &::before { 24 width: 2px ;25 height: 22px ;26 top: -4px ;27 left: 6px ;28 border-top: 9px solid;29 border-bottom: 9px solid;30 } 31 &::after { 32 width: 8px ;33 height: 2px ;34 background: currentColor;35 top: 6px ;36 left: 3px ;37 } 38 ` 39 40 export const ArrowsExpandLeftAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledArrowsExpandLeftAlt { ...props} ref={ ref} icon-role="arrows-expand-left-alt" /> 45 </> 46 ) 47 } , 48 ) 49
Arrows Expand Left Alt ended up a wonderful pure CSS icon created by adopting features like: transform, width, height, margin, box-shadow, border-top, border-bottom, background,
