Board
3K Views
59 Downloads - 25 API calls
14 Lines - 346 Bytes
Apr 23, 2020 content
1 .gg-board { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 12px ;
8 border-left: 4px solid transparent;
9 border-right: 4px solid transparent;
10 box-shadow:
11 0 0 0 2px ,
12 inset 2px 0 0 ,inset -2px 0 0 ;
13 border-radius: 2px 14 }
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="M6 4 C3.79086 4 2 5.79086 2 8 V16 C2 18.2091 3.79086 20 6 20 H18 C20.2091 20 22 18.2091 22 16 V8 C22 5.79086 20.2091 4 18 4 H6 ZM14 6 H10 V18 H14 V6 ZM16 6 V18 H18 C19.1046 18 20 17.1046 20 16 V8 C20 6.89543 19.1046 6 18 6 H16 ZM6 18 H8 V6 H6 C4.89543 6 4 6.89543 4 8 V16 C4 17.1046 4.89543 18 6 18 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBoard = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 12px ;12 border-left: 4px solid transparent;13 border-right: 4px solid transparent;14 box-shadow: 0 0 0 2px , inset 2px 0 0 , inset -2px 0 0 ;15 border-radius: 2px ;16 } 17 ` 18 19 export const Board = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 20 (props, ref) => { 21 return ( 22 <> 23 <StyledBoard { ...props} ref={ ref} icon-role="board" /> 24 </> 25 ) 26 } , 27 ) 28
Board is a wonderful pure CSS icon made by applying properties as follows: transform, width, height, border-left, border-right, box-shadow, border-radius, Fun to know, it has: 14 Lines of code at 346b & 254b after compiling. Pretty amazing 😲 for a icon designed by code.