Display Flex
3K Views
51 Downloads - 5 API calls
13 Lines - 295 Bytes
Apr 23, 2020 content design interface
1 .gg-display-flex { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 height: 14px ;
7 width: 16px ;
8 border: 2px solid transparent;
9 box-shadow:
10 0 0 0 2px ,
11 inset -2px 0 0 0 ,
12 inset 2px 0 0 0 13 }
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="M6 17 V7 H8 V17 H6 Z" fill="currentColor" /> 9 <path d="M16 7 V17 H18 V7 H16 Z" fill="currentColor" /> 10 <path 11 fill-rule="evenodd" 12 clip-rule="evenodd" 13 d="M2 3 H22 V21 H2 V3 ZM4 5 V19 H20 V5 H4 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDisplayFlex = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 height: 14px ;11 width: 16px ;12 border: 2px solid transparent;13 box-shadow: 0 0 0 2px , inset -2px 0 0 0 , inset 2px 0 0 0 ;14 } 15 ` 16 17 export const DisplayFlex = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 18 (props, ref) => { 19 return ( 20 <> 21 <StyledDisplayFlex { ...props} ref={ ref} icon-role="display-flex" /> 22 </> 23 ) 24 } , 25 ) 26
Display Flex is a magic pure CSS icon created by using features as follows: transform, height, width, border, box-shadow, Fun facts, it has: 13 Lines of code at 295b & 207b minified. Actually stunning 🤩 .