Insert Before design
1 .gg-insert-before-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-before-o::before { 13 box-shadow: -2px -12px 0 , 2px -12px 0 ;
14 } 15 16 .gg-insert-before-o::after ,
17 .gg-insert-before-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-before-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="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 14 C4 18.4183 7.58172 22 12 22 C16.4183 22 20 18.4183 20 14 C20 9.58172 16.4183 6 12 6 C7.58172 6 4 9.58172 4 14 ZM12 8 C8.68629 8 6 10.6863 6 14 C6 17.3137 8.68629 20 12 20 C15.3137 20 18 17.3137 18 14 C18 10.6863 15.3137 8 12 8 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledInsertBeforeO = 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 InsertBeforeO = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledInsertBeforeO { ...props} ref={ ref} icon-role="insert-before-o" /> 44 </> 45 ) 46 } , 47 ) 48
Insert Before ended up an amazing 100% CSS icon built by adopting features like: transform, width, height, border, border-radius, background,
