Block

2K Views 51 Downloads - 26 API calls 24 Lines - 485 Bytes Apr 23, 2020 signs interface

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

.gg-block::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 10px;
 height: 2px;
 background: currentColor;
 border-radius: 5px;
 transform: rotate(-45deg);
 top: 5px;
 left: 1px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.46457 14.1213C8.07404 14.5118 8.07404 15.145 8.46457 15.5355C8.85509 15.926 9.48825 15.926 9.87878 15.5355L15.5356 9.87862C15.9262 9.4881 15.9262 8.85493 15.5356 8.46441C15.1451 8.07388 14.5119 8.07388 14.1214 8.46441L8.46457 14.1213Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M6.34315 17.6569C9.46734 20.781 14.5327 20.781 17.6569 17.6569C20.781 14.5327 20.781 9.46734 17.6569 6.34315C14.5327 3.21895 9.46734 3.21895 6.34315 6.34315C3.21895 9.46734 3.21895 14.5327 6.34315 17.6569ZM16.2426 16.2426C13.8995 18.5858 10.1005 18.5858 7.75736 16.2426C5.41421 13.8995 5.41421 10.1005 7.75736 7.75736C10.1005 5.41421 13.8995 5.41421 16.2426 7.75736C18.5858 10.1005 18.5858 13.8995 16.2426 16.2426Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledBlock = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 100%; } &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 10px; height: 2px; background: currentColor; border-radius: 5px; transform: rotate(-45deg); top: 5px; left: 1px; }`export const Block = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledBlock {...props} ref={ref} icon-role="block" /></> ) },)

CSSSVGTSX

1	.gg-block {
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: 100%
10	}
11
12	.gg-block::before {
13	content: "";
14	display: block;
15	box-sizing: border-box;
16	position: absolute;
17	width: 10px;
18	height: 2px;
19	background: currentColor;
20	border-radius: 5px;
21	transform: rotate(-45deg);
22	top: 5px;
23	left: 1px
24	}

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	d="M8.46457 14.1213C8.07404 14.5118 8.07404 15.145 8.46457 15.5355C8.85509 15.926 9.48825 15.926 9.87878 15.5355L15.5356 9.87862C15.9262 9.4881 15.9262 8.85493 15.5356 8.46441C15.1451 8.07388 14.5119 8.07388 14.1214 8.46441L8.46457 14.1213Z"
10	fill="currentColor"
11	/>
12	<path
13	fill-rule="evenodd"
14	clip-rule="evenodd"
15	d="M6.34315 17.6569C9.46734 20.781 14.5327 20.781 17.6569 17.6569C20.781 14.5327 20.781 9.46734 17.6569 6.34315C14.5327 3.21895 9.46734 3.21895 6.34315 6.34315C3.21895 9.46734 3.21895 14.5327 6.34315 17.6569ZM16.2426 16.2426C13.8995 18.5858 10.1005 18.5858 7.75736 16.2426C5.41421 13.8995 5.41421 10.1005 7.75736 7.75736C10.1005 5.41421 13.8995 5.41421 16.2426 7.75736C18.5858 10.1005 18.5858 13.8995 16.2426 16.2426Z"
16	fill="currentColor"
17	/>
18	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledBlock = 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: 100%;
14	}
15	&::before {
16	content: '';
17	display: block;
18	box-sizing: border-box;
19	position: absolute;
20	width: 10px;
21	height: 2px;
22	background: currentColor;
23	border-radius: 5px;
24	transform: rotate(-45deg);
25	top: 5px;
26	left: 1px;
27	}
28	`
29
30	export const Block = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
31	(props, ref) => {
32	return (
33	<>
34	<StyledBlock {...props} ref={ref} icon-role="block" />
35	</>
36	)
37	},
38	)
39

HTMLCSSJSONXML

MarkupSVG Sprite

Block developed into a pure CSS icon built by adopting attributes as follows: transform, width, height, border, border-radius, background,
Fun to know, it has: 24 Lines of code at 485b & 342b after compression. Truly stunning 🤩 huhh.

Block

Thank you!