Layout Pin

1K Views 49 Downloads - 10 API calls 25 Lines - 500 Bytes Apr 23, 2020 interface design content

 .gg-layout-pin {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border: 2px solid;
 border-radius: 3px
}

.gg-layout-pin::after {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 6px;
 height: 6px;
 border-radius: 4px;
 top: 3px;
 left: 3px;
 box-shadow:
 -7px 0 0,7px 0 0,
 0 -7px 0,0 7px 0
}

<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="M16.9307 4.01587H14.7655C14.3582 2.84239 13.2428 2 11.9307 2C10.6185 2 9.50313 2.84239 9.09581 4.01587H6.93066C5.27381 4.01587 3.93066 5.35901 3.93066 7.01587V9.21205C2.80183 9.64283 2 10.7357 2 12.0159C2 13.296 2.80183 14.3889 3.93066 14.8197V17.0159C3.93066 18.6727 5.27381 20.0159 6.93066 20.0159H9.08467C9.48247 21.2064 10.6064 22.0645 11.9307 22.0645C13.255 22.0645 14.3789 21.2064 14.7767 20.0159H16.9307C18.5875 20.0159 19.9307 18.6727 19.9307 17.0159V14.8446C21.095 14.4322 21.929 13.3214 21.929 12.0159C21.929 10.7103 21.095 9.5995 19.9307 9.18718V7.01587C19.9307 5.35901 18.5875 4.01587 16.9307 4.01587ZM5.93066 14.8687V17.0159C5.93066 17.5682 6.37838 18.0159 6.93066 18.0159H9.11902C9.54426 16.8761 10.6427 16.0645 11.9307 16.0645C13.2187 16.0645 14.3171 16.8761 14.7423 18.0159H16.9307C17.4829 18.0159 17.9307 17.5682 17.9307 17.0159V14.8458C16.7646 14.4344 15.929 13.3227 15.929 12.0159C15.929 10.709 16.7646 9.59732 17.9307 9.18597V7.01587C17.9307 6.46358 17.4829 6.01587 16.9307 6.01587H14.7543C14.338 7.17276 13.2309 8 11.9307 8C10.6304 8 9.52331 7.17276 9.10703 6.01587H6.93066C6.37838 6.01587 5.93066 6.46358 5.93066 7.01587V9.16302C7.13193 9.55465 8 10.6839 8 12.0159C8 13.3479 7.13193 14.4771 5.93066 14.8687Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledLayoutPin = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 3px; } &::after { content: ''; display: block; box-sizing: border-box; position: absolute; width: 6px; height: 6px; border-radius: 4px; top: 3px; left: 3px; box-shadow: -7px 0 0, 7px 0 0, 0 -7px 0, 0 7px 0; }`export const LayoutPin = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledLayoutPin {...props} ref={ref} icon-role="layout-pin" /></> ) },)

CSSSVGTSX

1	.gg-layout-pin {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 16px;
7	height: 16px;
8	border: 2px solid;
9	border-radius: 3px
10	}
11
12	.gg-layout-pin::after {
13	content: "";
14	display: block;
15	box-sizing: border-box;
16	position: absolute;
17	width: 6px;
18	height: 6px;
19	border-radius: 4px;
20	top: 3px;
21	left: 3px;
22	box-shadow:
23	-7px 0 0,7px 0 0,
24	0 -7px 0,0 7px 0
25	}

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="M16.9307 4.01587H14.7655C14.3582 2.84239 13.2428 2 11.9307 2C10.6185 2 9.50313 2.84239 9.09581 4.01587H6.93066C5.27381 4.01587 3.93066 5.35901 3.93066 7.01587V9.21205C2.80183 9.64283 2 10.7357 2 12.0159C2 13.296 2.80183 14.3889 3.93066 14.8197V17.0159C3.93066 18.6727 5.27381 20.0159 6.93066 20.0159H9.08467C9.48247 21.2064 10.6064 22.0645 11.9307 22.0645C13.255 22.0645 14.3789 21.2064 14.7767 20.0159H16.9307C18.5875 20.0159 19.9307 18.6727 19.9307 17.0159V14.8446C21.095 14.4322 21.929 13.3214 21.929 12.0159C21.929 10.7103 21.095 9.5995 19.9307 9.18718V7.01587C19.9307 5.35901 18.5875 4.01587 16.9307 4.01587ZM5.93066 14.8687V17.0159C5.93066 17.5682 6.37838 18.0159 6.93066 18.0159H9.11902C9.54426 16.8761 10.6427 16.0645 11.9307 16.0645C13.2187 16.0645 14.3171 16.8761 14.7423 18.0159H16.9307C17.4829 18.0159 17.9307 17.5682 17.9307 17.0159V14.8458C16.7646 14.4344 15.929 13.3227 15.929 12.0159C15.929 10.709 16.7646 9.59732 17.9307 9.18597V7.01587C17.9307 6.46358 17.4829 6.01587 16.9307 6.01587H14.7543C14.338 7.17276 13.2309 8 11.9307 8C10.6304 8 9.52331 7.17276 9.10703 6.01587H6.93066C6.37838 6.01587 5.93066 6.46358 5.93066 7.01587V9.16302C7.13193 9.55465 8 10.6839 8 12.0159C8 13.3479 7.13193 14.4771 5.93066 14.8687Z"
12	fill="currentColor"
13	/>
14	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledLayoutPin = styled.i`
5	& {
6	box-sizing: border-box;
7	position: relative;
8	display: block;
9	transform: scale(var(--ggs, 1));
10	width: 16px;
11	height: 16px;
12	border: 2px solid;
13	border-radius: 3px;
14	}
15	&::after {
16	content: '';
17	display: block;
18	box-sizing: border-box;
19	position: absolute;
20	width: 6px;
21	height: 6px;
22	border-radius: 4px;
23	top: 3px;
24	left: 3px;
25	box-shadow: -7px 0 0, 7px 0 0, 0 -7px 0, 0 7px 0;
26	}
27	`
28
29	export const LayoutPin = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
30	(props, ref) => {
31	return (
32	<>
33	<StyledLayoutPin {...props} ref={ref} icon-role="layout-pin" />
34	</>
35	)
36	},
37	)
38

HTMLCSSJSONXML

MarkupSVG Sprite

Layout Pin developed into a magic pure CSS icon created by adopting features like: transform, width, height, border, border-radius, box-shadow,
Some stats, it has: 25 Lines of code at 500b & 345b after compiling. Quite awesome 🙆‍♂️ don't you think ?.

Layout Pin

Thank you!