Layout List
3K Views
49 Downloads - 5 API calls
30 Lines - 511 Bytes
Apr 23, 2020 content interface design
1 .gg-layout-list { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-layout-list,
6 .gg-layout-list::after ,
7 .gg-layout-list::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: 4px solid
15 } 16 17 .gg-layout-list::after ,
18 .gg-layout-list::before { 19 content: "";
20 position: absolute;
21 left: -6px 22 } 23 24 .gg-layout-list::after { 25 bottom: 4px 26 } 27 28 .gg-layout-list::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="M9 7 H7 V9 H9 V7 Z" fill="currentColor" /> 9 <path d="M7 13 V11 H9 V13 H7 Z" fill="currentColor" /> 10 <path d="M7 15 V17 H9 V15 H7 Z" fill="currentColor" /> 11 <path d="M11 15 V17 H17 V15 H11 Z" fill="currentColor" /> 12 <path d="M17 13 V11 H11 V13 H17 Z" fill="currentColor" /> 13 <path d="M17 7 V9 H11 V7 H17 Z" fill="currentColor" /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledLayoutList = 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: 4px 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 LayoutList = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 34 (props, ref) => { 35 return ( 36 <> 37 <StyledLayoutList { ...props} ref={ ref} icon-role="layout-list" /> 38 </> 39 ) 40 } , 41 ) 42
Layout List developed into a CSS icon built by practicing properties like: transform, width, height, border-left, border-right, .gg-layout-list, Fun to know, it has: 30 Lines of code at 511b & 383b after compiling. Actually wonderful 🤗 huhh.