Layout Grid Small
2K Views
54 Downloads - 5 API calls
30 Lines - 559 Bytes
Apr 23, 2020 content interface design
1 .gg-layout-grid-small { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-layout-grid-small,
6 .gg-layout-grid-small::after ,
7 .gg-layout-grid-small::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 10px ;
12 height: 2px ;
13 border-left: 6px double;
14 border-right: 2px solid
15 } 16 17 .gg-layout-grid-small::after ,
18 .gg-layout-grid-small::before { 19 content: "";
20 position: absolute;
21 left: -6px 22 } 23 24 .gg-layout-grid-small::after { 25 bottom: 4px 26 } 27 28 .gg-layout-grid-small::before { 29 top: 4px 30 }
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 d="M7 7 H9 V9 H7 V7 Z" fill="currentColor" /> 9 <path d="M11 7 H13 V9 H11 V7 Z" fill="currentColor" /> 10 <path d="M17 7 H15 V9 H17 V7 Z" fill="currentColor" /> 11 <path d="M7 11 H9 V13 H7 V11 Z" fill="currentColor" /> 12 <path d="M13 11 H11 V13 H13 V11 Z" fill="currentColor" /> 13 <path d="M15 11 H17 V13 H15 V11 Z" fill="currentColor" /> 14 <path d="M9 15 H7 V17 H9 V15 Z" fill="currentColor" /> 15 <path d="M11 15 H13 V17 H11 V15 Z" fill="currentColor" /> 16 <path d="M17 15 H15 V17 H17 V15 Z" fill="currentColor" /> 17 </svg> 18
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledLayoutGridSmall = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 width: 10px ;15 height: 2px ;16 border-left: 6px double;17 border-right: 2px solid;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 left: -6px ;24 } 25 &::after { 26 bottom: 4px ;27 } 28 &::before { 29 top: 4px ;30 } 31 ` 32 33 export const LayoutGridSmall = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 34 (props, ref) => { 35 return ( 36 <> 37 <StyledLayoutGridSmall { ...props} ref={ ref} icon-role="layout-grid-small" /> 38 </> 39 ) 40 } , 41 ) 42
Layout Grid Small turned into a magic pure CSS icon created by practicing features as follows: transform, width, height, border-left, border-right, .gg-layout-grid-small, Some stats, it has: 30 Lines of code at 559b & 431b after compression. Truly amazing 😲 .