Board

3K Views 59 Downloads - 25 API calls 14 Lines - 346 Bytes Apr 23, 2020 content

 .gg-board {
 display: block;
 position: relative;
 box-sizing: border-box;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 12px;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 box-shadow:
 0 0 0 2px,
 inset 2px 0 0,inset -2px 0 0;
 border-radius: 2px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 4C3.79086 4 2 5.79086 2 8V16C2 18.2091 3.79086 20 6 20H18C20.2091 20 22 18.2091 22 16V8C22 5.79086 20.2091 4 18 4H6ZM14 6H10V18H14V6ZM16 6V18H18C19.1046 18 20 17.1046 20 16V8C20 6.89543 19.1046 6 18 6H16ZM6 18H8V6H6C4.89543 6 4 6.89543 4 8V16C4 17.1046 4.89543 18 6 18Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledBoard = styled.i` & { display: block; position: relative; box-sizing: border-box; transform: scale(var(--ggs, 1)); width: 16px; height: 12px; border-left: 4px solid transparent; border-right: 4px solid transparent; box-shadow: 0 0 0 2px, inset 2px 0 0, inset -2px 0 0; border-radius: 2px; }`export const Board = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledBoard {...props} ref={ref} icon-role="board" /></> ) },)

CSSSVGTSX

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 4C3.79086 4 2 5.79086 2 8V16C2 18.2091 3.79086 20 6 20H18C20.2091 20 22 18.2091 22 16V8C22 5.79086 20.2091 4 18 4H6ZM14 6H10V18H14V6ZM16 6V18H18C19.1046 18 20 17.1046 20 16V8C20 6.89543 19.1046 6 18 6H16ZM6 18H8V6H6C4.89543 6 4 6.89543 4 8V16C4 17.1046 4.89543 18 6 18Z"
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

HTMLCSSJSONXML

MarkupSVG Sprite

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.

Board

Thank you!