Reorder interface
1 .gg-reorder { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 2px ;
8 border-radius: 3px ;
9 background: currentColor
10 } 11 12 .gg-reorder::after ,
13 .gg-reorder::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 border-radius: 3px 19 } 20 21 .gg-reorder::before { 22 border: 2px solid;
23 width: 6px ;
24 height: 6px ;
25 left: 12px ;
26 top: -2px 27 } 28 29 .gg-reorder::after { 30 top: -4px ;
31 left: 0 ;
32 width: 10px ;
33 height: 2px ;
34 opacity: .5 ;
35 background: currentColor;
36 box-shadow:
37 0 8px 0 0 ,
38 0 12px 0 0 ,
39 0 16px 0 0 40 }
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="M3 4 C3 3.44772 3.44772 3 4 3 H12 C12.5523 3 13 3.44772 13 4 C13 4.55228 12.5523 5 12 5 H4 C3.44772 5 3 4.55228 3 4 Z" 10 fill="currentColor" 11 fill-opacity="0.5 " 12 /> 13 <path 14 d="M3 12 C3 11.4477 3.44772 11 4 11 H12 C12.5523 11 13 11.4477 13 12 C13 12.5523 12.5523 13 12 13 H4 C3.44772 13 3 12.5523 3 12 Z" 15 fill="currentColor" 16 fill-opacity="0.5 " 17 /> 18 <path 19 d="M3 16 C3 15.4477 3.44772 15 4 15 H12 C12.5523 15 13 15.4477 13 16 C13 16.5523 12.5523 17 12 17 H4 C3.44772 17 3 16.5523 3 16 Z" 20 fill="currentColor" 21 fill-opacity="0.5 " 22 /> 23 <path 24 d="M3 20 C3 19.4477 3.44772 19 4 19 H12 C12.5523 19 13 19.4477 13 20 C13 20.5523 12.5523 21 12 21 H4 C3.44772 21 3 20.5523 3 20 Z" 25 fill="currentColor" 26 fill-opacity="0.5 " 27 /> 28 <path 29 fill-rule="evenodd" 30 clip-rule="evenodd" 31 d="M15.1707 9 C15.5825 10.1652 16.6938 11 18 11 C19.6569 11 21 9.65685 21 8 C21 6.34315 19.6569 5 18 5 C16.6938 5 15.5825 5.83481 15.1707 7 H4 C3.44772 7 3 7.44772 3 8 C3 8.55228 3.44772 9 4 9 H15.1707 ZM19 8 C19 8.55228 18.5523 9 18 9 C17.4477 9 17 8.55228 17 8 C17 7.44772 17.4477 7 18 7 C18.5523 7 19 7.44772 19 8 Z" 32 fill="currentColor" 33 /> 34 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledReorder = 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: 2px ;12 border-radius: 3px ;13 background: currentColor;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 border-radius: 3px ;22 } 23 &::before { 24 border: 2px solid;25 width: 6px ;26 height: 6px ;27 left: 12px ;28 top: -2px ;29 } 30 &::after { 31 top: -4px ;32 left: 0 ;33 width: 10px ;34 height: 2px ;35 opacity: 0.5 ;36 background: currentColor;37 box-shadow: 0 8px 0 0 , 0 12px 0 0 , 0 16px 0 0 ;38 } 39 ` 40 41 export const Reorder = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledReorder { ...props} ref={ ref} icon-role="reorder" /> 46 </> 47 ) 48 } , 49 ) 50
Reorder ended up a magic CSS icon made by using properties as follows: transform, width, height, border-radius, background, opacity, box-shadow,
