Cap

2K Views 48 Downloads - 28 API calls 44 Lines - 924 Bytes Apr 23, 2020 design

 .gg-cap {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 18px;
 height: 12px;
 border: 2px solid;
 border-bottom-color: transparent;
 border-top-left-radius: 100px;
 border-top-right-radius: 100px
}

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

.gg-cap::after {
 border-top: 2px solid transparent;
 border-bottom: 2px solid transparent;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 box-shadow:
 0 0 0 2px,
 inset 12px 0 0 0;
 bottom: -8px;
 width: 18px;
 height: 6px;
 border-radius: 1px;
 left: -2px
}

.gg-cap::before {
 width: 4px;
 height: 4px;
 background: currentColor;
 border-radius: 2px;
 left: 5px;
 top: -4px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 18V20H16V18H8Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M13.988 3.2203C13.9959 3.14796 14 3.07446 14 3C14 1.89543 13.1046 1 12 1C10.8954 1 10 1.89543 10 3C10 3.07446 10.0041 3.14796 10.012 3.2203C5.99799 4.12533 3 7.71255 3 12C3 12.3883 3.02459 12.7709 3.0723 13.1462C1.86949 13.5369 1 14.6669 1 16V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V16C23 14.6669 22.1305 13.5369 20.9277 13.1462C20.9754 12.7709 21 12.3883 21 12C21 7.71255 18.002 4.12533 13.988 3.2203ZM12 5C8.13401 5 5 8.13401 5 12C5 12.3402 5.02412 12.674 5.07063 13H18.9294C18.9759 12.674 19 12.3402 19 12C19 8.13401 15.866 5 12 5ZM3 16C3 15.4477 3.44772 15 4 15H20C20.5523 15 21 15.4477 21 16V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V16Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledCap = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 18px; height: 12px; border: 2px solid; border-bottom-color: transparent; border-top-left-radius: 100px; border-top-right-radius: 100px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; } &::after { border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; box-shadow: 0 0 0 2px, inset 12px 0 0 0; bottom: -8px; width: 18px; height: 6px; border-radius: 1px; left: -2px; } &::before { width: 4px; height: 4px; background: currentColor; border-radius: 2px; left: 5px; top: -4px; }`export const Cap = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledCap {...props} ref={ref} icon-role="cap" /></> ) },)

CSSSVGTSX

1	.gg-cap {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 18px;
7	height: 12px;
8	border: 2px solid;
9	border-bottom-color: transparent;
10	border-top-left-radius: 100px;
11	border-top-right-radius: 100px
12	}
13
14	.gg-cap::after,
15	.gg-cap::before {
16	content: "";
17	display: block;
18	box-sizing: border-box;
19	position: absolute
20	}
21
22	.gg-cap::after {
23	border-top: 2px solid transparent;
24	border-bottom: 2px solid transparent;
25	border-left: 4px solid transparent;
26	border-right: 4px solid transparent;
27	box-shadow:
28	0 0 0 2px,
29	inset 12px 0 0 0;
30	bottom: -8px;
31	width: 18px;
32	height: 6px;
33	border-radius: 1px;
34	left: -2px
35	}
36
37	.gg-cap::before {
38	width: 4px;
39	height: 4px;
40	background: currentColor;
41	border-radius: 2px;
42	left: 5px;
43	top: -4px
44	}

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 d="M8 18V20H16V18H8Z" fill="currentColor" />
9	<path
10	fill-rule="evenodd"
11	clip-rule="evenodd"
12	d="M13.988 3.2203C13.9959 3.14796 14 3.07446 14 3C14 1.89543 13.1046 1 12 1C10.8954 1 10 1.89543 10 3C10 3.07446 10.0041 3.14796 10.012 3.2203C5.99799 4.12533 3 7.71255 3 12C3 12.3883 3.02459 12.7709 3.0723 13.1462C1.86949 13.5369 1 14.6669 1 16V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V16C23 14.6669 22.1305 13.5369 20.9277 13.1462C20.9754 12.7709 21 12.3883 21 12C21 7.71255 18.002 4.12533 13.988 3.2203ZM12 5C8.13401 5 5 8.13401 5 12C5 12.3402 5.02412 12.674 5.07063 13H18.9294C18.9759 12.674 19 12.3402 19 12C19 8.13401 15.866 5 12 5ZM3 16C3 15.4477 3.44772 15 4 15H20C20.5523 15 21 15.4477 21 16V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V16Z"
13	fill="currentColor"
14	/>
15	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledCap = 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: 12px;
12	border: 2px solid;
13	border-bottom-color: transparent;
14	border-top-left-radius: 100px;
15	border-top-right-radius: 100px;
16	}
17	&::after,
18	&::before {
19	content: '';
20	display: block;
21	box-sizing: border-box;
22	position: absolute;
23	}
24	&::after {
25	border-top: 2px solid transparent;
26	border-bottom: 2px solid transparent;
27	border-left: 4px solid transparent;
28	border-right: 4px solid transparent;
29	box-shadow: 0 0 0 2px, inset 12px 0 0 0;
30	bottom: -8px;
31	width: 18px;
32	height: 6px;
33	border-radius: 1px;
34	left: -2px;
35	}
36	&::before {
37	width: 4px;
38	height: 4px;
39	background: currentColor;
40	border-radius: 2px;
41	left: 5px;
42	top: -4px;
43	}
44	`
45
46	export const Cap = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
47	(props, ref) => {
48	return (
49	<>
50	<StyledCap {...props} ref={ref} icon-role="cap" />
51	</>
52	)
53	},
54	)
55

HTMLCSSJSONXML

MarkupSVG Sprite

Cap ended up an amazing pure CSS icon made by practicing properties such as: transform, width, height, border, border-bottom-color, border-bottom, border-left, border-right, box-shadow, border-radius, background,
Fun facts, it has: 44 Lines of code at 924b & 669b minified. Truly amazing 😲 don't you think ?.

Cap

Thank you!