Insert After design
1 .gg-insert-after-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-after-r::before { 13 box-shadow: -2px 12px 0 , 2px 12px 0 ;
14 } 15 16 .gg-insert-after-r::after ,
17 .gg-insert-after-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-after-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="M9 8 C8.44772 8 8 8.44772 8 9 C8 9.55229 8.44772 10 9 10 H11 V12 C11 12.5523 11.4477 13 12 13 C12.5523 13 13 12.5523 13 12 V10 H15 C15.5523 10 16 9.55229 16 9 C16 8.44772 15.5523 8 15 8 H13 V6 C13 5.44772 12.5523 5 12 5 C11.4477 5 11 5.44772 11 6 V8 H9 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M4 4 C4 2.34315 5.34315 1 7 1 H17 C18.6569 1 20 2.34315 20 4 V14 C20 15.6569 18.6569 17 17 17 H7 C5.34315 17 4 15.6569 4 14 V4 ZM7 3 H17 C17.5523 3 18 3.44772 18 4 V14 C18 14.5523 17.5523 15 17 15 H7 C6.44772 15 6 14.5523 6 14 V4 C6 3.44772 6.44772 3 7 3 Z" 16 fill="currentColor" 17 /> 18 <path 19 d="M5 20 C4.44772 20 4 20.4477 4 21 C4 21.5523 4.44772 22 5 22 H19 C19.5523 22 20 21.5523 20 21 C20 20.4477 19.5523 20 19 20 H5 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledInsertAfterR = 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 InsertAfterR = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledInsertAfterR { ...props} ref={ ref} icon-role="insert-after-r" /> 44 </> 45 ) 46 } , 47 ) 48
Insert After became a wonderful pure CSS icon created by applying properties such as: transform, width, height, border, border-radius, background,
