Extension Remove
1K Views
47 Downloads - 6 API calls
29 Lines - 617 Bytes
Apr 23, 2020 content interface
1 .gg-extension-remove { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 background:
7 linear-gradient(
8 to left,currentColor 10px ,transparent 0 )
9 no-repeat 10px 4px /6px 2px ;
10 width: 16px ;
11 height: 16px 12 } 13 14 .gg-extension-remove::after ,
15 .gg-extension-remove::before { 16 content: "";
17 display: block;
18 position: absolute;
19 box-sizing: border-box;
20 width: 8px ;
21 height: 14px ;
22 border: 2px solid;
23 bottom: 0 24 } 25 26 .gg-extension-remove::after { 27 width: 14px ;
28 height: 8px 29 }
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="M12 11 V5 H4 V19 H18 V11 H12 ZM6 7 H10 V11 H6 V7 ZM10 13 V17 H6 V13 H10 ZM16 13 V17 H12 V13 H16 Z" 12 fill="currentColor" 13 /> 14 <path d="M20 7 H14 V9 H20 V7 Z" fill="currentColor" /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledExtensionRemove = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 background: linear-gradient(to left, currentColor 10px , transparent 0 ) no-repeat 10px 4px /6px 11 2px ; 12 width: 16px ;13 height: 16px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 position: absolute;20 box-sizing: border-box;21 width: 8px ;22 height: 14px ;23 border: 2px solid;24 bottom: 0 ;25 } 26 &::after { 27 width: 14px ;28 height: 8px ;29 } 30 ` 31 32 export const ExtensionRemove = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 33 (props, ref) => { 34 return ( 35 <> 36 <StyledExtensionRemove { ...props} ref={ ref} icon-role="extension-remove" /> 37 </> 38 ) 39 } , 40 ) 41
Extension Remove turned into an amazing CSS icon made by adopting properties like: transform, background, width, height, border, Fun facts, it has: 29 Lines of code at 617b & 442b minified. Pretty stunning 🤩 don't you think ?.