Arrows H Alt arrows interface
1 .gg-arrows-h-alt { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 10px ;
8 background:
9 linear-gradient(
10 to left,
11 currentColor 18px ,transparent 0 )
12 no-repeat 2px 4px /16px 2px 13 } 14 .gg-arrows-h-alt::after ,
15 .gg-arrows-h-alt::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 width: 6px ;
21 height: 6px ;
22 transform: rotate(45deg );
23 top: 2px 24 } 25 .gg-arrows-h-alt::after { 26 border-bottom: 2px solid;
27 border-left: 2px solid;
28 left: 1px 29 } 30 .gg-arrows-h-alt::before { 31 border-top: 2px solid;
32 border-right: 2px solid;
33 right: 1px 34 }
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="M4.24267 7.75735 L5.65688 9.17157 L3.82842 11 H20.1716 L18.3431 9.17157 L19.7573 7.75735 L24 12 L19.7572 16.2426 L18.343 14.8284 L20.1714 13 H3.82845 L5.65685 14.8284 L4.24264 16.2426 L0 12 L4.24267 7.75735 Z" 10 fill="currentColor" 11 /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledArrowsHAlt = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 20px ;11 height: 10px ;12 background: linear-gradient(to left, currentColor 18px , transparent 0 ) no-repeat 2px 4px /16px 13 2px ; 14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 6px ;22 height: 6px ;23 transform: rotate(45deg );24 top: 2px ;25 } 26 &::after { 27 border-bottom: 2px solid;28 border-left: 2px solid;29 left: 1px ;30 } 31 &::before { 32 border-top: 2px solid;33 border-right: 2px solid;34 right: 1px ;35 } 36 ` 37 38 export const ArrowsHAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledArrowsHAlt { ...props} ref={ ref} icon-role="arrows-h-alt" /> 43 </> 44 ) 45 } , 46 ) 47
Arrows H Alt turned into a pure CSS icon made by using features like: transform, width, height, background, border-left, border-right,
