Google Tasks

253 Views 9 Downloads - 2 API calls 33 Lines - 606 Bytes Apr 23, 2020 brands

 .gg-google-tasks {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 18px;
 height: 18px
}

.gg-google-tasks::after,
.gg-google-tasks::before {
 content: "";
 position: absolute;
 display: block;
 background: currentColor
}

.gg-google-tasks::before {
 width: 6px;
 height: 6px;
 border-radius: 10px;
 bottom: 6px;
 left: 2px
}

.gg-google-tasks::after {
 height: 18px;
 width: 4px;
 border-radius: 20px;
 transform: rotate(40deg);
 right: 2px;
 bottom: 0
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.7679 5.71447C17.4779 4.86832 18.7394 4.75795 19.5856 5.46796C20.4317 6.17796 20.5421 7.43947 19.8321 8.28562L10.833 19.0102C10.123 19.8564 8.86153 19.9668 8.01538 19.2568C7.16923 18.5468 7.05886 17.2852 7.76886 16.4391L16.7679 5.71447Z" fill="currentColor" /><path d="M3 12.7396C3 11.6351 3.89543 10.7396 5 10.7396C6.10457 10.7396 7 11.6351 7 12.7396C7 13.8442 6.10457 14.7396 5 14.7396C3.89543 14.7396 3 13.8442 3 12.7396Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledGoogleTasks = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 18px; height: 18px; } &::after, &::before { content: ''; position: absolute; display: block; background: currentColor; } &::before { width: 6px; height: 6px; border-radius: 10px; bottom: 6px; left: 2px; } &::after { height: 18px; width: 4px; border-radius: 20px; transform: rotate(40deg); right: 2px; bottom: 0; }`export const GoogleTasks = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledGoogleTasks {...props} ref={ref} icon-role="google-tasks" /></> ) },)

CSSSVGTSX

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

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="M16.7679 5.71447C17.4779 4.86832 18.7394 4.75795 19.5856 5.46796C20.4317 6.17796 20.5421 7.43947 19.8321 8.28562L10.833 19.0102C10.123 19.8564 8.86153 19.9668 8.01538 19.2568C7.16923 18.5468 7.05886 17.2852 7.76886 16.4391L16.7679 5.71447Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M3 12.7396C3 11.6351 3.89543 10.7396 5 10.7396C6.10457 10.7396 7 11.6351 7 12.7396C7 13.8442 6.10457 14.7396 5 14.7396C3.89543 14.7396 3 13.8442 3 12.7396Z"
14	fill="currentColor"
15	/>
16	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Google Tasks became an amazing pure CSS icon created by practicing features as follows: transform, width, height, background, border-radius,
Fun to know, it has: 33 Lines of code at 606b & 433b after compression. Pretty amazing 😲 for a CSS designed icon.

Google Tasks

Thank you!