Google

1K Views 32 Downloads - 11 API calls 28 Lines - 554 Bytes Apr 23, 2020 brands

 .gg-google,
.gg-google::before {
 box-sizing: border-box;
 display: block
}

.gg-google {
 position: relative;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 20px;
 border: 4px solid;
 border-right-color: transparent;
 border-radius: 22px
}

.gg-google::before {
 content: "";
 position: absolute;
 border-top: 4px solid;
 border-right: 4px solid;
 border-bottom: 4px solid;
 border-radius: 0 0 10px 0;
 width: 10px;
 height: 12px;
 right: -4px;
 bottom: -4px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledGoogle = styled.i` &, &::before { box-sizing: border-box; display: block; } & { position: relative; transform: scale(var(--ggs, 1)); width: 20px; height: 20px; border: 4px solid; border-right-color: transparent; border-radius: 22px; } &::before { content: ''; position: absolute; border-top: 4px solid; border-right: 4px solid; border-bottom: 4px solid; border-radius: 0 0 10px 0; width: 10px; height: 12px; right: -4px; bottom: -4px; }`export const Google = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledGoogle {...props} ref={ref} icon-role="google" /></> ) },)

CSSSVGTSX

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

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="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z"
10	fill="currentColor"
11	/>
12	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Google ended up a magic 100% CSS icon built by using attributes like: .gg-google, transform, width, height, border, border-right-color, border-radius, border-top, border-right, border-bottom,
Fun to know, it has: 28 Lines of code at 554b & 402b after compiling. Quite awesome 🙆‍♂️ don't you think ?.

Google

Thank you!