Maximize
3K Views
55 Downloads - 8 API calls
13 Lines - 286 Bytes
Apr 23, 2020 interface arrows
1 .gg-maximize { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 14px ;
8 box-shadow:
9 -6px -6px 0 -4px ,
10 6px 6px 0 -4px ,
11 6px -6px 0 -4px ,
12 -6px 6px 0 -4px 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="M3 3 H9 V5 H5 V9 H3 V3 Z" fill="currentColor" /> 9 <path d="M3 21 H9 V19 H5 V15 H3 V21 Z" fill="currentColor" /> 10 <path d="M15 21 H21 V15 H19 V19 H15 V21 Z" fill="currentColor" /> 11 <path d="M21 3 H15 V5 H19 V9 H21 V3 Z" fill="currentColor" /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMaximize = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 14px ;12 box-shadow: -6px -6px 0 -4px , 6px 6px 0 -4px , 6px -6px 0 -4px , -6px 6px 0 -4px ;13 } 14 ` 15 16 export const Maximize = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 17 (props, ref) => { 18 return ( 19 <> 20 <StyledMaximize { ...props} ref={ ref} icon-role="maximize" /> 21 </> 22 ) 23 } , 24 ) 25
Maximize developed into a wonderful CSS icon made by applying properties such as: transform, width, height, box-shadow, Fun to know, it has: 13 Lines of code at 286b & 195b after compiling. Actually marvelous 💎 huhh.