Insert After design
1 .gg-insert-after-o { 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: 20px 10 } 11 12 .gg-insert-after-o::before { 13 box-shadow: -2px 12px 0 , 2px 12px 0 ;
14 } 15 16 .gg-insert-after-o::after ,
17 .gg-insert-after-o::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-o::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 9 C4 4.58172 7.58172 1 12 1 C16.4183 1 20 4.58172 20 9 C20 13.4183 16.4183 17 12 17 C7.58172 17 4 13.4183 4 9 ZM12 15 C8.68629 15 6 12.3137 6 9 C6 5.68629 8.68629 3 12 3 C15.3137 3 18 5.68629 18 9 C18 12.3137 15.3137 15 12 15 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 StyledInsertAfterO = 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: 20px ;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 InsertAfterO = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledInsertAfterO { ...props} ref={ ref} icon-role="insert-after-o" /> 44 </> 45 ) 46 } , 47 ) 48
Insert After became a magic CSS icon made by applying features as follows: transform, width, height, border, border-radius, background,
