Phone

3K Views 30 Downloads - 9 API calls 52 Lines - 1107 Bytes Apr 23, 2020 time alerts interface

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

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

.gg-phone::after {
 width: 18px;
 height: 18px;
 border-top-left-radius: 1px;
 border-bottom-right-radius: 1px;
 border-bottom-left-radius: 12px;
 border-left: 4px solid;
 border-bottom: 4px solid;
 left: 2px;
 bottom: 2px;
 background:
 linear-gradient(
 to left,
 currentColor 10px,
 transparent 0
 ) no-repeat right 11px/6px 4px,
 linear-gradient(
 to left,
 currentColor 10px,
 transparent 0
 ) no-repeat -1px 0/4px 6px
}

.gg-phone::before {
 width: 20px;
 height: 20px;
 border: 6px double;
 border-top-color: transparent;
 border-bottom-color: transparent;
 border-left-color: transparent;
 border-radius: 50%;
 transform: rotate(-45deg);
 bottom: 2px;
 left: 2px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 12C22 10.6868 21.7413 9.38647 21.2388 8.1731C20.7362 6.95996 19.9997 5.85742 19.0711 4.92896C18.1425 4.00024 17.0401 3.26367 15.8268 2.76123C14.6136 2.25854 13.3132 2 12 2V4C13.0506 4 14.0909 4.20703 15.0615 4.60889C16.0321 5.01099 16.914 5.60034 17.6569 6.34326C18.3997 7.08594 18.989 7.96802 19.391 8.93848C19.7931 9.90918 20 10.9495 20 12H22Z" fill="currentColor" /><path d="M2 10V5C2 4.44775 2.44772 4 3 4H8C8.55228 4 9 4.44775 9 5V9C9 9.55225 8.55228 10 8 10H6C6 14.4182 9.58173 18 14 18V16C14 15.4478 14.4477 15 15 15H19C19.5523 15 20 15.4478 20 16V21C20 21.5522 19.5523 22 19 22H14C7.37259 22 2 16.6274 2 10Z" fill="currentColor" /><path d="M17.5433 9.70386C17.8448 10.4319 18 11.2122 18 12H16.2C16.2 11.4485 16.0914 10.9023 15.8803 10.3928C15.6692 9.88306 15.3599 9.42017 14.9698 9.03027C14.5798 8.64014 14.1169 8.33081 13.6073 8.11963C13.0977 7.90869 12.5515 7.80005 12 7.80005V6C12.7879 6 13.5681 6.15527 14.2961 6.45679C15.024 6.7583 15.6855 7.2002 16.2426 7.75732C16.7998 8.31445 17.2418 8.97583 17.5433 9.70386Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledPhone = styled.i` & { box-sizing: border-box; position: relative; display: block; width: 22px; height: 22px; transform: scale(var(--ggs, 1)); } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; } &::after { width: 18px; height: 18px; border-top-left-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 12px; border-left: 4px solid; border-bottom: 4px solid; left: 2px; bottom: 2px; background: linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px, linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px; } &::before { width: 20px; height: 20px; border: 6px double; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(-45deg); bottom: 2px; left: 2px; }`export const Phone = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledPhone {...props} ref={ref} icon-role="phone" /></> ) },)

CSSSVGTSX

1	.gg-phone {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	width: 22px;
6	height: 22px;
7	transform: scale(var(--ggs,1))
8	}
9
10	.gg-phone::after,
11	.gg-phone::before {
12	content: "";
13	display: block;
14	box-sizing: border-box;
15	position: absolute
16	}
17
18	.gg-phone::after {
19	width: 18px;
20	height: 18px;
21	border-top-left-radius: 1px;
22	border-bottom-right-radius: 1px;
23	border-bottom-left-radius: 12px;
24	border-left: 4px solid;
25	border-bottom: 4px solid;
26	left: 2px;
27	bottom: 2px;
28	background:
29	linear-gradient(
30	to left,
31	currentColor 10px,
32	transparent 0
33	) no-repeat right 11px/6px 4px,
34	linear-gradient(
35	to left,
36	currentColor 10px,
37	transparent 0
38	) no-repeat -1px 0/4px 6px
39	}
40
41	.gg-phone::before {
42	width: 20px;
43	height: 20px;
44	border: 6px double;
45	border-top-color: transparent;
46	border-bottom-color: transparent;
47	border-left-color: transparent;
48	border-radius: 50%;
49	transform: rotate(-45deg);
50	bottom: 2px;
51	left: 2px
52	}

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="M22 12C22 10.6868 21.7413 9.38647 21.2388 8.1731C20.7362 6.95996 19.9997 5.85742 19.0711 4.92896C18.1425 4.00024 17.0401 3.26367 15.8268 2.76123C14.6136 2.25854 13.3132 2 12 2V4C13.0506 4 14.0909 4.20703 15.0615 4.60889C16.0321 5.01099 16.914 5.60034 17.6569 6.34326C18.3997 7.08594 18.989 7.96802 19.391 8.93848C19.7931 9.90918 20 10.9495 20 12H22Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M2 10V5C2 4.44775 2.44772 4 3 4H8C8.55228 4 9 4.44775 9 5V9C9 9.55225 8.55228 10 8 10H6C6 14.4182 9.58173 18 14 18V16C14 15.4478 14.4477 15 15 15H19C19.5523 15 20 15.4478 20 16V21C20 21.5522 19.5523 22 19 22H14C7.37259 22 2 16.6274 2 10Z"
14	fill="currentColor"
15	/>
16	<path
17	d="M17.5433 9.70386C17.8448 10.4319 18 11.2122 18 12H16.2C16.2 11.4485 16.0914 10.9023 15.8803 10.3928C15.6692 9.88306 15.3599 9.42017 14.9698 9.03027C14.5798 8.64014 14.1169 8.33081 13.6073 8.11963C13.0977 7.90869 12.5515 7.80005 12 7.80005V6C12.7879 6 13.5681 6.15527 14.2961 6.45679C15.024 6.7583 15.6855 7.2002 16.2426 7.75732C16.7998 8.31445 17.2418 8.97583 17.5433 9.70386Z"
18	fill="currentColor"
19	/>
20	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Phone ended up an amazing pure CSS icon built by practicing features as follows: width, height, transform, border-left, border-bottom, background, border, border-top-color, border-bottom-color, border-left-color, border-radius,
Fun to know, it has: 52 Lines of code at 1107b & 804b after compression. Pretty amazing 😲 huhh.

Phone

Thank you!