Trash

15K Views 62 Downloads - 83 API calls 44 Lines - 887 Bytes Apr 23, 2020 content interface

 .gg-trash {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 10px;
 height: 12px;
 border: 2px solid transparent;
 box-shadow:
 0 0 0 2px,
 inset -2px 0 0,
 inset 2px 0 0;
 border-bottom-left-radius: 1px;
 border-bottom-right-radius: 1px;
 margin-top: 4px
}

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

.gg-trash::after {
 background: currentColor;
 border-radius: 3px;
 width: 16px;
 height: 2px;
 top: -4px;
 left: -5px
}

.gg-trash::before {
 width: 10px;
 height: 4px;
 border: 2px solid;
 border-bottom: transparent;
 border-top-left-radius: 2px;
 border-top-right-radius: 2px;
 top: -7px;
 left: -2px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5V4C17 2.89543 16.1046 2 15 2H9C7.89543 2 7 2.89543 7 4V5H4C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H5V18C5 19.6569 6.34315 21 8 21H16C17.6569 21 19 19.6569 19 18V7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H17ZM15 4H9V5H15V4ZM17 7H7V18C7 18.5523 7.44772 19 8 19H16C16.5523 19 17 18.5523 17 18V7Z" fill="currentColor" /><path d="M9 9H11V17H9V9Z" fill="currentColor" /><path d="M13 9H15V17H13V9Z" fill="currentColor" /></svg>

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

CSSSVGTSX

1	.gg-trash {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 10px;
7	height: 12px;
8	border: 2px solid transparent;
9	box-shadow:
10	0 0 0 2px,
11	inset -2px 0 0,
12	inset 2px 0 0;
13	border-bottom-left-radius: 1px;
14	border-bottom-right-radius: 1px;
15	margin-top: 4px
16	}
17
18	.gg-trash::after,
19	.gg-trash::before {
20	content: "";
21	display: block;
22	box-sizing: border-box;
23	position: absolute
24	}
25
26	.gg-trash::after {
27	background: currentColor;
28	border-radius: 3px;
29	width: 16px;
30	height: 2px;
31	top: -4px;
32	left: -5px
33	}
34
35	.gg-trash::before {
36	width: 10px;
37	height: 4px;
38	border: 2px solid;
39	border-bottom: transparent;
40	border-top-left-radius: 2px;
41	border-top-right-radius: 2px;
42	top: -7px;
43	left: -2px
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
9	fill-rule="evenodd"
10	clip-rule="evenodd"
11	d="M17 5V4C17 2.89543 16.1046 2 15 2H9C7.89543 2 7 2.89543 7 4V5H4C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H5V18C5 19.6569 6.34315 21 8 21H16C17.6569 21 19 19.6569 19 18V7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H17ZM15 4H9V5H15V4ZM17 7H7V18C7 18.5523 7.44772 19 8 19H16C16.5523 19 17 18.5523 17 18V7Z"
12	fill="currentColor"
13	/>
14	<path d="M9 9H11V17H9V9Z" fill="currentColor" />
15	<path d="M13 9H15V17H13V9Z" fill="currentColor" />
16	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Trash ended up a pure CSS icon created by practicing attributes as follows: transform, width, height, border, box-shadow, border-radius, border-bottom,
Fun facts, it has: 44 Lines of code at 887b & 629b after compression. Truly stunning 🤩 for a icon designed by code.

Trash

Thank you!