Support

3K Views 54 Downloads - 37 API calls 39 Lines - 751 Bytes Apr 23, 2020 signs interface

 .gg-support {
 box-sizing: border-box;
 position: relative;
 display: block;
 width: 20px;
 height: 20px;
 transform: rotate(45deg) scale(var(--ggs,1));
 border: 5px solid transparent;
 box-shadow:
 0 0 0 2px,
 inset 0 0 0 2px;
 border-radius: 40px
}

.gg-support::after,
.gg-support::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute
}

.gg-support::before {
 border-left: 9px solid;
 border-right: 9px solid;
 width: 24px;
 height: 2px;
 left: -7px;
 top: 4px
}

.gg-support::after {
 width: 2px;
 height: 24px;
 border-top: 9px solid;
 border-bottom: 9px solid;
 left: 4px;
 top: -7px
}

<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="M12.2607 21.9966C12.174 21.9988 12.0871 22 12 22C11.9128 22 11.8259 21.9988 11.7393 21.9966C7.68318 21.8928 4.22762 19.3738 2.7573 15.8242C1.74192 13.3674 1.7476 10.588 2.77433 8.13481C3.27688 6.93672 4.00599 5.85718 4.90808 4.94979L4.94983 4.90804C5.85259 4.01056 6.92574 3.28429 8.1165 2.78202C10.5894 1.74123 13.3958 1.73933 15.87 2.77633C17.0688 3.27993 18.1488 4.01042 19.0562 4.91407L19.0859 4.94373C19.9989 5.86054 20.7351 6.95351 21.2392 8.16721C21.7279 9.34662 21.9812 10.6006 21.999 11.8573C21.9997 11.9047 22 11.9523 22 12C22 12.0506 21.9996 12.1012 21.9989 12.1516C21.9376 16.2743 19.3814 19.7925 15.7731 21.2637C14.6481 21.7213 13.4566 21.9656 12.2607 21.9966ZM14.0322 15.4464L16.906 18.3202C14.0281 20.5599 9.97192 20.5599 7.09402 18.3202L9.96779 15.4464C11.2175 16.1845 12.7825 16.1845 14.0322 15.4464ZM8.55358 14.0322L5.67981 16.906C3.44007 14.0281 3.44007 9.97192 5.67981 7.09402L8.55358 9.96779C7.81548 11.2175 7.81548 12.7825 8.55358 14.0322ZM10.0824 12.5694C10.0773 12.5523 10.0725 12.5351 10.0679 12.5179C9.97738 12.179 9.97738 11.821 10.0679 11.4821C10.1556 11.1537 10.3282 10.8434 10.5858 10.5858C10.8299 10.3417 11.1213 10.1739 11.4306 10.0824C11.4477 10.0773 11.4649 10.0725 11.4821 10.0679C11.821 9.97738 12.179 9.97737 12.5179 10.0679C12.8463 10.1556 13.1566 10.3282 13.4142 10.5858C13.6583 10.8299 13.8261 11.1213 13.9176 11.4306C13.9227 11.4477 13.9275 11.4649 13.9321 11.4821C14.0226 11.821 14.0226 12.179 13.9321 12.5179C13.8444 12.8462 13.6718 13.1566 13.4142 13.4142C13.1701 13.6583 12.8787 13.8261 12.5694 13.9176C12.5523 13.9227 12.5351 13.9275 12.5179 13.9321C12.179 14.0226 11.821 14.0226 11.4821 13.9321C11.1538 13.8444 10.8434 13.6718 10.5858 13.4142C10.3417 13.1701 10.1739 12.8787 10.0824 12.5694ZM14.0322 8.55357C12.7825 7.81548 11.2175 7.81548 9.96779 8.55357L7.09402 5.6798C9.97192 3.44007 14.0281 3.44007 16.906 5.6798L14.0322 8.55357ZM18.3202 16.906C20.5599 14.0281 20.5599 9.97192 18.3202 7.09402L15.4464 9.96779C16.1845 11.2175 16.1845 12.7825 15.4464 14.0322L18.3202 16.906Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledSupport = styled.i` & { box-sizing: border-box; position: relative; display: block; width: 20px; height: 20px; transform: rotate(45deg) scale(var(--ggs, 1)); border: 5px solid transparent; box-shadow: 0 0 0 2px, inset 0 0 0 2px; border-radius: 40px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; } &::before { border-left: 9px solid; border-right: 9px solid; width: 24px; height: 2px; left: -7px; top: 4px; } &::after { width: 2px; height: 24px; border-top: 9px solid; border-bottom: 9px solid; left: 4px; top: -7px; }`export const Support = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledSupport {...props} ref={ref} icon-role="support" /></> ) },)

CSSSVGTSX

1	.gg-support {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	width: 20px;
6	height: 20px;
7	transform: rotate(45deg) scale(var(--ggs,1));
8	border: 5px solid transparent;
9	box-shadow:
10	0 0 0 2px,
11	inset 0 0 0 2px;
12	border-radius: 40px
13	}
14
15	.gg-support::after,
16	.gg-support::before {
17	content: "";
18	display: block;
19	box-sizing: border-box;
20	position: absolute
21	}
22
23	.gg-support::before {
24	border-left: 9px solid;
25	border-right: 9px solid;
26	width: 24px;
27	height: 2px;
28	left: -7px;
29	top: 4px
30	}
31
32	.gg-support::after {
33	width: 2px;
34	height: 24px;
35	border-top: 9px solid;
36	border-bottom: 9px solid;
37	left: 4px;
38	top: -7px
39	}

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="M12.2607 21.9966C12.174 21.9988 12.0871 22 12 22C11.9128 22 11.8259 21.9988 11.7393 21.9966C7.68318 21.8928 4.22762 19.3738 2.7573 15.8242C1.74192 13.3674 1.7476 10.588 2.77433 8.13481C3.27688 6.93672 4.00599 5.85718 4.90808 4.94979L4.94983 4.90804C5.85259 4.01056 6.92574 3.28429 8.1165 2.78202C10.5894 1.74123 13.3958 1.73933 15.87 2.77633C17.0688 3.27993 18.1488 4.01042 19.0562 4.91407L19.0859 4.94373C19.9989 5.86054 20.7351 6.95351 21.2392 8.16721C21.7279 9.34662 21.9812 10.6006 21.999 11.8573C21.9997 11.9047 22 11.9523 22 12C22 12.0506 21.9996 12.1012 21.9989 12.1516C21.9376 16.2743 19.3814 19.7925 15.7731 21.2637C14.6481 21.7213 13.4566 21.9656 12.2607 21.9966ZM14.0322 15.4464L16.906 18.3202C14.0281 20.5599 9.97192 20.5599 7.09402 18.3202L9.96779 15.4464C11.2175 16.1845 12.7825 16.1845 14.0322 15.4464ZM8.55358 14.0322L5.67981 16.906C3.44007 14.0281 3.44007 9.97192 5.67981 7.09402L8.55358 9.96779C7.81548 11.2175 7.81548 12.7825 8.55358 14.0322ZM10.0824 12.5694C10.0773 12.5523 10.0725 12.5351 10.0679 12.5179C9.97738 12.179 9.97738 11.821 10.0679 11.4821C10.1556 11.1537 10.3282 10.8434 10.5858 10.5858C10.8299 10.3417 11.1213 10.1739 11.4306 10.0824C11.4477 10.0773 11.4649 10.0725 11.4821 10.0679C11.821 9.97738 12.179 9.97737 12.5179 10.0679C12.8463 10.1556 13.1566 10.3282 13.4142 10.5858C13.6583 10.8299 13.8261 11.1213 13.9176 11.4306C13.9227 11.4477 13.9275 11.4649 13.9321 11.4821C14.0226 11.821 14.0226 12.179 13.9321 12.5179C13.8444 12.8462 13.6718 13.1566 13.4142 13.4142C13.1701 13.6583 12.8787 13.8261 12.5694 13.9176C12.5523 13.9227 12.5351 13.9275 12.5179 13.9321C12.179 14.0226 11.821 14.0226 11.4821 13.9321C11.1538 13.8444 10.8434 13.6718 10.5858 13.4142C10.3417 13.1701 10.1739 12.8787 10.0824 12.5694ZM14.0322 8.55357C12.7825 7.81548 11.2175 7.81548 9.96779 8.55357L7.09402 5.6798C9.97192 3.44007 14.0281 3.44007 16.906 5.6798L14.0322 8.55357ZM18.3202 16.906C20.5599 14.0281 20.5599 9.97192 18.3202 7.09402L15.4464 9.96779C16.1845 11.2175 16.1845 12.7825 15.4464 14.0322L18.3202 16.906Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Support turned into an amazing pure CSS icon created by practicing attributes as follows: width, height, transform, border, box-shadow, border-radius, border-right, border-top, border-bottom,
Some stats, it has: 39 Lines of code at 751b & 531b minified. Pretty amazing 😲 .

Support

Thank you!