Insert Before design
1 .gg-insert-before-r { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 2px solid;
9 border-radius: 4px 10 } 11 12 .gg-insert-before-r::before { 13 box-shadow: -2px -12px 0 , 2px -12px 0 ;
14 } 15 16 .gg-insert-before-r::after ,
17 .gg-insert-before-r::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 width: 8px ;
23 height: 2px ;
24 background: currentColor;
25 border-radius: 5px ;
26 top: 5px ;
27 left: 2px 28 } 29 30 .gg-insert-before-r::after { 31 width: 2px ;
32 height: 8px ;
33 top: 2px ;
34 left: 5px 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="M5 3 C4.44772 3 4 2.55228 4 2 C4 1.44772 4.44772 1 5 1 H19 C19.5523 1 20 1.44772 20 2 C20 2.55228 19.5523 3 19 3 H5 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M9 15 C8.44772 15 8 14.5523 8 14 C8 13.4477 8.44772 13 9 13 H11 V11 C11 10.4477 11.4477 10 12 10 C12.5523 10 13 10.4477 13 11 V13 H15 C15.5523 13 16 13.4477 16 14 C16 14.5523 15.5523 15 15 15 H13 V17 C13 17.5523 12.5523 18 12 18 C11.4477 18 11 17.5523 11 17 V15 H9 Z" 14 fill="currentColor" 15 /> 16 <path 17 fill-rule="evenodd" 18 clip-rule="evenodd" 19 d="M4 19 C4 20.6569 5.34315 22 7 22 H17 C18.6569 22 20 20.6569 20 19 V9 C20 7.34315 18.6569 6 17 6 H7 C5.34315 6 4 7.34315 4 9 V19 ZM17 20 C17.5523 20 18 19.5523 18 19 V9 C18 8.44772 17.5523 8 17 8 H7 C6.44772 8 6 8.44772 6 9 V19 C6 19.5523 6.44772 20 7 20 H17 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledInsertBeforeR = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 16px ;12 border: 2px solid;13 border-radius: 4px ;14 } 15 &::before { 16 box-shadow: -2px -12px 0 , 2px -12px 0 ;17 } 18 &::after , 19 &::before { 20 content: '';21 display: block;22 box-sizing: border-box;23 position: absolute;24 width: 8px ;25 height: 2px ;26 background: currentColor;27 border-radius: 5px ;28 top: 5px ;29 left: 2px ;30 } 31 &::after { 32 width: 2px ;33 height: 8px ;34 top: 2px ;35 left: 5px ;36 } 37 ` 38 39 export const InsertBeforeR = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledInsertBeforeR { ...props} ref={ ref} icon-role="insert-before-r" /> 44 </> 45 ) 46 } , 47 ) 48
Insert Before ended up a pure CSS icon made by practicing attributes as follows: transform, width, height, border, border-radius, background,
