Insert Before design
1 .gg-insert-before { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 18px 8 } 9 10 .gg-insert-before::before { 11 box-shadow: -2px -10px 0 , 2px -10px 0 ;
12 } 13 14 .gg-insert-before::after ,
15 .gg-insert-before::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 width: 10px ;
21 height: 2px ;
22 background: currentColor;
23 border-radius: 5px ;
24 top: 8px ;
25 left: 4px 26 } 27 28 .gg-insert-before::after { 29 width: 2px ;
30 height: 10px ;
31 top: 4px ;
32 left: 8px 33 }
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 5 C3 5.55228 3.44772 6 4 6 H20 C20.5523 6 21 5.55228 21 5 C21 4.44772 20.5523 4 20 4 H4 C3.44772 4 3 4.44772 3 5 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M12 20 C12.5523 20 13 19.5523 13 19 V16 H16 C16.5523 16 17 15.5523 17 15 C17 14.4477 16.5523 14 16 14 H13 V11 C13 10.4477 12.5523 10 12 10 C11.4477 10 11 10.4477 11 11 V14 H8 C7.44772 14 7 14.4477 7 15 C7 15.5523 7.44772 16 8 16 H11 V19 C11 19.5523 11.4477 20 12 20 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledInsertBefore = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 18px ;12 } 13 &::before { 14 box-shadow: -2px -10px 0 , 2px -10px 0 ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 10px ;23 height: 2px ;24 background: currentColor;25 border-radius: 5px ;26 top: 8px ;27 left: 4px ;28 } 29 &::after { 30 width: 2px ;31 height: 10px ;32 top: 4px ;33 left: 8px ;34 } 35 ` 36 37 export const InsertBefore = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledInsertBefore { ...props} ref={ ref} icon-role="insert-before" /> 42 </> 43 ) 44 } , 45 ) 46
Insert Before ended up a pure CSS icon built by practicing properties as follows: transform, width, height, background, border-radius,
