Erase content interface
1 .gg-erase { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 22px ;
7 height: 18px 8 } 9 10 .gg-erase::after ,
11 .gg-erase::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute
16 } 17 18 .gg-erase::before { 19 width: 6px ;
20 height: 14px ;
21 border-bottom:
22 4px solid transparent;
23 border-radius: 1px ;
24 box-shadow:
25 0 0 0 2px ,
26 inset 0 -2px 0 0 ;
27 left: 7px ;
28 top: 2px ;
29 transform: rotate(45deg )
30 } 31 32 .gg-erase::after { 33 background: currentColor;
34 width: 22px ;
35 height: 2px ;
36 bottom: 0 ;
37 border-radius: 20px 38 }
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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M3.49997 12.8995 C2.71892 13.6805 2.71892 14.9468 3.49997 15.7279 L7.35785 19.5858 H4.08576 C3.53347 19.5858 3.08576 20.0335 3.08576 20.5858 C3.08576 21.1381 3.53347 21.5858 4.08576 21.5858 H20.0858 C20.638 21.5858 21.0858 21.1381 21.0858 20.5858 C21.0858 20.0335 20.638 19.5858 20.0858 19.5858 H10.9558 L20.4705 10.071 C21.2516 9.28999 21.2516 8.02366 20.4705 7.24261 L16.2279 2.99997 C15.4468 2.21892 14.1805 2.21892 13.3995 2.99997 L3.49997 12.8995 ZM7.82579 11.4021 L4.91418 14.3137 L9.15683 18.5563 L12.0684 15.6447 L7.82579 11.4021 ZM9.24 9.98787 L13.4826 14.2305 L19.0563 8.65683 L14.8137 4.41418 L9.24 9.98787 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledErase = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 22px ;11 height: 18px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 } 20 &::before { 21 width: 6px ;22 height: 14px ;23 border-bottom: 4px solid transparent;24 border-radius: 1px ;25 box-shadow: 0 0 0 2px , inset 0 -2px 0 0 ;26 left: 7px ;27 top: 2px ;28 transform: rotate(45deg );29 } 30 &::after { 31 background: currentColor;32 width: 22px ;33 height: 2px ;34 bottom: 0 ;35 border-radius: 20px ;36 } 37 ` 38 39 export const Erase = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledErase { ...props} ref={ ref} icon-role="erase" /> 44 </> 45 ) 46 } , 47 ) 48
Erase ended up an amazing CSS icon built by adopting properties like: transform, width, height, border-bottom, border-radius, box-shadow,
