Tap Single

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

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

.gg-tap-single::after,
.gg-tap-single::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 border: 2px solid transparent;
 border-radius: 22px
}

.gg-tap-single::before {
 width: 16px;
 height: 16px;
 border-top: 2px solid;
 top: 2px
}

.gg-tap-single::after {
 width: 6px;
 height: 10px;
 border-bottom-width: 5px;
 box-shadow: 0 0 0 2px,inset 0 0 0 2px;
 left: 5px;
 top: 8px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0491 3.11401C14.1927 3.11401 16.1393 3.95706 17.5756 5.32967L16.1609 6.74437C15.087 5.73346 13.6404 5.11401 12.0491 5.11401C10.4086 5.11401 8.92183 5.77243 7.83868 6.83944L6.42444 5.42519C7.86954 3.99627 9.85631 3.11401 12.0491 3.11401Z" fill="currentColor" /><path d="M10.9767 11.886C10.9767 11.3337 11.4244 10.886 11.9767 10.886C12.529 10.886 12.9767 11.3337 12.9767 11.886V13.886H10.9767V11.886Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9767 6.88599C9.21526 6.88599 6.97668 9.12456 6.97668 11.886V15.886C6.97668 18.6474 9.21526 20.886 11.9767 20.886C14.7381 20.886 16.9767 18.6474 16.9767 15.886V11.886C16.9767 9.12456 14.7381 6.88599 11.9767 6.88599ZM14.9767 15.886V11.886C14.9767 10.2291 13.6335 8.88599 11.9767 8.88599C10.3198 8.88599 8.97668 10.2291 8.97668 11.886V15.886C8.97668 17.5428 10.3198 18.886 11.9767 18.886C13.6335 18.886 14.9767 17.5428 14.9767 15.886Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledTapSingle = styled.i` & { display: block; position: relative; box-sizing: border-box; transform: scale(var(--ggs, 1)); width: 16px; height: 22px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; border: 2px solid transparent; border-radius: 22px; } &::before { width: 16px; height: 16px; border-top: 2px solid; top: 2px; } &::after { width: 6px; height: 10px; border-bottom-width: 5px; box-shadow: 0 0 0 2px, inset 0 0 0 2px; left: 5px; top: 8px; }`export const TapSingle = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledTapSingle {...props} ref={ref} icon-role="tap-single" /></> ) },)

CSSSVGTSX

1	.gg-tap-single {
2	display: block;
3	position: relative;
4	box-sizing: border-box;
5	transform: scale(var(--ggs,1));
6	width: 16px;
7	height: 22px
8	}
9
10	.gg-tap-single::after,
11	.gg-tap-single::before {
12	content: "";
13	display: block;
14	box-sizing: border-box;
15	position: absolute;
16	border: 2px solid transparent;
17	border-radius: 22px
18	}
19
20	.gg-tap-single::before {
21	width: 16px;
22	height: 16px;
23	border-top: 2px solid;
24	top: 2px
25	}
26
27	.gg-tap-single::after {
28	width: 6px;
29	height: 10px;
30	border-bottom-width: 5px;
31	box-shadow: 0 0 0 2px,inset 0 0 0 2px;
32	left: 5px;
33	top: 8px
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	d="M12.0491 3.11401C14.1927 3.11401 16.1393 3.95706 17.5756 5.32967L16.1609 6.74437C15.087 5.73346 13.6404 5.11401 12.0491 5.11401C10.4086 5.11401 8.92183 5.77243 7.83868 6.83944L6.42444 5.42519C7.86954 3.99627 9.85631 3.11401 12.0491 3.11401Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M10.9767 11.886C10.9767 11.3337 11.4244 10.886 11.9767 10.886C12.529 10.886 12.9767 11.3337 12.9767 11.886V13.886H10.9767V11.886Z"
14	fill="currentColor"
15	/>
16	<path
17	fill-rule="evenodd"
18	clip-rule="evenodd"
19	d="M11.9767 6.88599C9.21526 6.88599 6.97668 9.12456 6.97668 11.886V15.886C6.97668 18.6474 9.21526 20.886 11.9767 20.886C14.7381 20.886 16.9767 18.6474 16.9767 15.886V11.886C16.9767 9.12456 14.7381 6.88599 11.9767 6.88599ZM14.9767 15.886V11.886C14.9767 10.2291 13.6335 8.88599 11.9767 8.88599C10.3198 8.88599 8.97668 10.2291 8.97668 11.886V15.886C8.97668 17.5428 10.3198 18.886 11.9767 18.886C13.6335 18.886 14.9767 17.5428 14.9767 15.886Z"
20	fill="currentColor"
21	/>
22	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Tap Single became a 100% CSS icon made by using properties as follows: transform, width, height, border, border-radius, border-top, border-bottom-width, box-shadow,
Fun to know, it has: 34 Lines of code at 657b & 477b minified. Quite wonderful 🤗 for a icon designed by code.

Tap Single

Thank you!