Globe Alt

Views Downloads - API calls 34 Lines - 620 Bytes Apr 23, 2020 interface

 .gg-globe-alt,
.gg-globe-alt::after,
.gg-globe-alt::before {
 display: block;
 box-sizing: border-box;
 height: 18px;
 border: 2px solid
}

.gg-globe-alt {
 position: relative;
 transform: scale(var(--ggs,1));
 width: 18px;
 border-radius: 22px
}

.gg-globe-alt::after,
.gg-globe-alt::before {
 content: "";
 position: absolute;
 width: 8px;
 border-radius: 100%;
 top: -2px;
 left: 3px
}

.gg-globe-alt::after {
 width: 24px;
 height: 20px;
 border: 2px solid transparent;
 border-bottom: 2px solid;
 top: -11px;
 left: -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="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM14.8055 18.4151C17.1228 17.4003 18.7847 15.1667 18.9806 12.525C18.1577 12.9738 17.12 13.3418 15.9371 13.598C15.7882 15.4676 15.3827 17.1371 14.8055 18.4151ZM9.1945 5.58487C7.24725 6.43766 5.76275 8.15106 5.22208 10.244C5.4537 10.4638 5.84813 10.7341 6.44832 11.0008C6.89715 11.2003 7.42053 11.3798 8.00537 11.5297C8.05853 9.20582 8.50349 7.11489 9.1945 5.58487ZM10.1006 13.9108C10.2573 15.3675 10.5852 16.6202 10.9992 17.5517C11.2932 18.2133 11.5916 18.6248 11.8218 18.8439C11.9037 18.9219 11.9629 18.9634 12 18.9848C12.0371 18.9634 12.0963 18.9219 12.1782 18.8439C12.4084 18.6248 12.7068 18.2133 13.0008 17.5517C13.4148 16.6202 13.7427 15.3675 13.8994 13.9108C13.2871 13.9692 12.6516 14 12 14C11.3484 14 10.7129 13.9692 10.1006 13.9108ZM8.06286 13.598C8.21176 15.4676 8.61729 17.1371 9.1945 18.4151C6.8772 17.4003 5.21525 15.1666 5.01939 12.525C5.84231 12.9738 6.88001 13.3418 8.06286 13.598ZM13.9997 11.8896C13.369 11.9609 12.6993 12 12 12C11.3008 12 10.631 11.9609 10.0003 11.8896C10.0135 9.66408 10.4229 7.74504 10.9992 6.44832C11.2932 5.78673 11.5916 5.37516 11.8218 5.15605C11.9037 5.07812 11.9629 5.03659 12 5.01516C12.0371 5.03659 12.0963 5.07812 12.1782 5.15605C12.4084 5.37516 12.7068 5.78673 13.0008 6.44832C13.5771 7.74504 13.9865 9.66408 13.9997 11.8896ZM15.9946 11.5297C15.9415 9.20582 15.4965 7.11489 14.8055 5.58487C16.7528 6.43766 18.2373 8.15107 18.7779 10.244C18.5463 10.4638 18.1519 10.7341 17.5517 11.0008C17.1029 11.2003 16.5795 11.3798 15.9946 11.5297Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledGlobeAlt = styled.i` &, &::after, &::before { display: block; box-sizing: border-box; height: 18px; border: 2px solid; } & { position: relative; transform: scale(var(--ggs, 1)); width: 18px; border-radius: 22px; } &::after, &::before { content: ''; position: absolute; width: 8px; border-radius: 100%; top: -2px; left: 3px; } &::after { width: 24px; height: 20px; border: 2px solid transparent; border-bottom: 2px solid; top: -11px; left: -5px; }`export const GlobeAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledGlobeAlt {...props} ref={ref} icon-role="globe-alt" /></> ) },)

CSSSVGTSX

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

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 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM14.8055 18.4151C17.1228 17.4003 18.7847 15.1667 18.9806 12.525C18.1577 12.9738 17.12 13.3418 15.9371 13.598C15.7882 15.4676 15.3827 17.1371 14.8055 18.4151ZM9.1945 5.58487C7.24725 6.43766 5.76275 8.15106 5.22208 10.244C5.4537 10.4638 5.84813 10.7341 6.44832 11.0008C6.89715 11.2003 7.42053 11.3798 8.00537 11.5297C8.05853 9.20582 8.50349 7.11489 9.1945 5.58487ZM10.1006 13.9108C10.2573 15.3675 10.5852 16.6202 10.9992 17.5517C11.2932 18.2133 11.5916 18.6248 11.8218 18.8439C11.9037 18.9219 11.9629 18.9634 12 18.9848C12.0371 18.9634 12.0963 18.9219 12.1782 18.8439C12.4084 18.6248 12.7068 18.2133 13.0008 17.5517C13.4148 16.6202 13.7427 15.3675 13.8994 13.9108C13.2871 13.9692 12.6516 14 12 14C11.3484 14 10.7129 13.9692 10.1006 13.9108ZM8.06286 13.598C8.21176 15.4676 8.61729 17.1371 9.1945 18.4151C6.8772 17.4003 5.21525 15.1666 5.01939 12.525C5.84231 12.9738 6.88001 13.3418 8.06286 13.598ZM13.9997 11.8896C13.369 11.9609 12.6993 12 12 12C11.3008 12 10.631 11.9609 10.0003 11.8896C10.0135 9.66408 10.4229 7.74504 10.9992 6.44832C11.2932 5.78673 11.5916 5.37516 11.8218 5.15605C11.9037 5.07812 11.9629 5.03659 12 5.01516C12.0371 5.03659 12.0963 5.07812 12.1782 5.15605C12.4084 5.37516 12.7068 5.78673 13.0008 6.44832C13.5771 7.74504 13.9865 9.66408 13.9997 11.8896ZM15.9946 11.5297C15.9415 9.20582 15.4965 7.11489 14.8055 5.58487C16.7528 6.43766 18.2373 8.15107 18.7779 10.244C18.5463 10.4638 18.1519 10.7341 17.5517 11.0008C17.1029 11.2003 16.5795 11.3798 15.9946 11.5297Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Globe Alt turned into a 100% CSS icon made by practicing attributes as follows: .gg-globe-alt, height, border, transform, width, border-radius, border-bottom,
Some stats, it has: 34 Lines of code at 620b & 450b after compiling. Truly amazing 😲 .

Globe Alt

Thank you!