Repeat arrows interface
1 .gg-repeat { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 box-shadow:
7 -2px -2px 0 0 ,
8 2px 2px 0 0 ;
9 width: 14px ;
10 height: 6px 11 } 12 13 .gg-repeat::after ,
14 .gg-repeat::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute;
19 width: 0 ;
20 height: 0 ;
21 border-top: 3px solid transparent;
22 border-bottom: 3px solid transparent
23 } 24 25 .gg-repeat::before { 26 border-left: 5px solid;
27 top: -4px ;
28 right: 0 29 } 30 31 .gg-repeat::after { 32 border-right: 5px solid;
33 bottom: -4px ;
34 left: 0 35 }
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="M18.3701 7.99993 L13.8701 10.598 V8.99993 H6.88989 V12.9999 H4.88989 V6.99993 H13.8701 V5.40186 L18.3701 7.99993 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M10.1299 16.9999 H19.1101 V10.9999 H17.1101 V14.9999 H10.1299 V13.4019 L5.62988 15.9999 L10.1299 18.598 V16.9999 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledRepeat = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 box-shadow: -2px -2px 0 0 , 2px 2px 0 0 ;11 width: 14px ;12 height: 6px ;13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 width: 0 ;21 height: 0 ;22 border-top: 3px solid transparent;23 border-bottom: 3px solid transparent;24 } 25 &::before { 26 border-left: 5px solid;27 top: -4px ;28 right: 0 ;29 } 30 &::after { 31 border-right: 5px solid;32 bottom: -4px ;33 left: 0 ;34 } 35 ` 36 37 export const Repeat = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledRepeat { ...props} ref={ ref} icon-role="repeat" /> 42 </> 43 ) 44 } , 45 ) 46
Repeat ended up an amazing CSS icon made by using features like: transform, box-shadow, width, height, border-top, border-bottom,
