User Remove interface
1 .gg-user-remove { 2 display: block;
3 transform: scale(var(--ggs,1 ));
4 box-sizing: border-box;
5 width: 20px ;
6 height: 18px ;
7 background:
8 linear-gradient(
9 to left,
10 currentColor 8px ,
11 transparent 0 )
12 no-repeat 14px 6px /6px 2px 13 } 14 15 .gg-user-remove::after ,
16 .gg-user-remove::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 border: 2px solid
22 } 23 24 .gg-user-remove::before { 25 width: 8px ;
26 height: 8px ;
27 border-radius: 30px ;
28 top: 0 ;
29 left: 2px 30 } 31 32 .gg-user-remove::after { 33 width: 12px ;
34 height: 9px ;
35 border-bottom: 0 ;
36 border-top-left-radius: 3px ;
37 border-top-right-radius: 3px ;
38 top: 9px 39 }
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="M8 11 C10.2091 11 12 9.20914 12 7 C12 4.79086 10.2091 3 8 3 C5.79086 3 4 4.79086 4 7 C4 9.20914 5.79086 11 8 11 ZM8 9 C9.10457 9 10 8.10457 10 7 C10 5.89543 9.10457 5 8 5 C6.89543 5 6 5.89543 6 7 C6 8.10457 6.89543 9 8 9 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M11 14 C11.5523 14 12 14.4477 12 15 V21 H14 V15 C14 13.3431 12.6569 12 11 12 H5 C3.34315 12 2 13.3431 2 15 V21 H4 V15 C4 14.4477 4.44772 14 5 14 H11 Z" 16 fill="currentColor" 17 /> 18 <path d="M22 9 H16 V11 H22 V9 Z" fill="currentColor" /> 19 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledUserRemove = styled.i` 5 & { 6 display: block;7 transform: scale(var(--ggs, 1 ));8 box-sizing: border-box;9 width: 20px ;10 height: 18px ;11 background: linear-gradient(to left, currentColor 8px , transparent 0 ) no-repeat 14px 6px /6px 2px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 border: 2px solid;20 } 21 &::before { 22 width: 8px ;23 height: 8px ;24 border-radius: 30px ;25 top: 0 ;26 left: 2px ;27 } 28 &::after { 29 width: 12px ;30 height: 9px ;31 border-bottom: 0 ;32 border-top-left-radius: 3px ;33 border-top-right-radius: 3px ;34 top: 9px ;35 } 36 ` 37 38 export const UserRemove = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledUserRemove { ...props} ref={ ref} icon-role="user-remove" /> 43 </> 44 ) 45 } , 46 ) 47
User Remove ended up a pure CSS icon created by applying properties as follows: transform, width, height, background, border, border-radius, border-bottom,
