Extension
2K Views
53 Downloads - 5 API calls
33 Lines - 551 Bytes
Apr 23, 2020 interface content
1 .gg-extension,
2 .gg-extension::after ,
3 .gg-extension::before { 4 box-sizing: border-box;
5 display: block;
6 border: 2px solid
7 } 8 9 .gg-extension { 10 position: relative;
11 transform: translateX(-10px ) scale(var(--ggs,1 ));
12 width: 8px ;
13 height: 14px 14 } 15 16 .gg-extension::after ,
17 .gg-extension::before { 18 content: "";
19 position: absolute;
20 height: 8px 21 } 22 23 .gg-extension::before { 24 bottom: -2px ;
25 left: -2px ;
26 width: 14px 27 } 28 29 .gg-extension::after { 30 top: -6px ;
31 right: -12px ;
32 width: 8px 33 }
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="M13 3 H21 V11 H13 V3 ZM15 5 H19 V9 H15 V5 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M17 21 V13 H11 V7 H3 V21 H17 ZM9 9 H5 V13 H9 V9 ZM5 19 L5 15 H9 V19 H5 ZM11 19 V15 H15 V19 H11 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledExtension = styled.i` 5 &, 6 &::after , 7 &::before { 8 box-sizing: border-box;9 display: block;10 border: 2px solid;11 } 12 & { 13 position: relative;14 transform: translateX(-10px ) scale(var(--ggs, 1 ));15 width: 8px ;16 height: 14px ;17 } 18 &::after , 19 &::before { 20 content: '';21 position: absolute;22 height: 8px ;23 } 24 &::before { 25 bottom: -2px ;26 left: -2px ;27 width: 14px ;28 } 29 &::after { 30 top: -6px ;31 right: -12px ;32 width: 8px ;33 } 34 ` 35 36 export const Extension = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledExtension { ...props} ref={ ref} icon-role="extension" /> 41 </> 42 ) 43 } , 44 ) 45
Extension ended up a 100% CSS icon made by adopting attributes such as: .gg-extension, border, transform, width, height, Fun to know, it has: 33 Lines of code at 551b & 402b after compiling. Quite wonderful 🤗 for a icon designed by code.