Style

Views Downloads - API calls 31 Lines - 496 Bytes Apr 23, 2020 interface

 .gg-style,
.gg-style::after,
.gg-style::before {
 display: block;
 box-sizing: border-box;
 width: 8px;
 height: 8px
}

.gg-style {
 position: relative;
 transform: scale(var(--ggs,1));
 box-shadow: -3px 3px 0 -1px,3px -3px 0 -1px
}

.gg-style::after,
.gg-style::before {
 content: "";
 position: absolute;
 border: 2px solid
}

.gg-style::before {
 top: -5px;
 left: -5px
}

.gg-style::after {
 bottom: -5px;
 right: -5px
}

<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="M13 21V13H21V21H13ZM15 15H19L19 19H15V15Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M3 11L3 3L11 3V11H3ZM5 5L9 5V9L5 9L5 5Z" fill="currentColor" /><path d="M18 6V12H16V8L12 8V6L18 6Z" fill="currentColor" /><path d="M12 18H6L6 12H8L8 16H12V18Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledStyle = styled.i` &, &::after, &::before { display: block; box-sizing: border-box; width: 8px; height: 8px; } & { position: relative; transform: scale(var(--ggs, 1)); box-shadow: -3px 3px 0 -1px, 3px -3px 0 -1px; } &::after, &::before { content: ''; position: absolute; border: 2px solid; } &::before { top: -5px; left: -5px; } &::after { bottom: -5px; right: -5px; }`export const Style = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledStyle {...props} ref={ref} icon-role="style" /></> ) },)

CSSSVGTSX

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

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="M13 21V13H21V21H13ZM15 15H19L19 19H15V15Z"
12	fill="currentColor"
13	/>
14	<path
15	fill-rule="evenodd"
16	clip-rule="evenodd"
17	d="M3 11L3 3L11 3V11H3ZM5 5L9 5V9L5 9L5 5Z"
18	fill="currentColor"
19	/>
20	<path d="M18 6V12H16V8L12 8V6L18 6Z" fill="currentColor" />
21	<path d="M12 18H6L6 12H8L8 16H12V18Z" fill="currentColor" />
22	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Style developed into a wonderful CSS icon built by using properties such as: .gg-style, width, height, transform, box-shadow, border,
Fun to know, it has: 31 Lines of code at 496b & 361b after compression. Quite wonderful 🤗 don't you think ?.

Style

Thank you!