Shopping Bag

Views 59 Downloads - 46 API calls 26 Lines - 508 Bytes Apr 23, 2020 interface shopping

 .gg-shopping-bag {
 transform: scale(var(--ggs,1))
}

.gg-shopping-bag,
.gg-shopping-bag::after {
 box-sizing: border-box;
 position: relative;
 display: block;
 width: 20px;
 height: 20px;
 border: 2px solid;
 border-radius: 3px
}

.gg-shopping-bag::after {
 content: "";
 position: absolute;
 width: 10px;
 height: 6px;
 border-bottom-left-radius: 120px;
 border-bottom-right-radius: 120px;
 border-top: 0;
 top: 2px;
 left: 3px
}

<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="M5 4H19C19.5523 4 20 4.44771 20 5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5C4 4.44772 4.44771 4 5 4ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM12 12C9.23858 12 7 9.31371 7 6H9C9 8.56606 10.6691 10 12 10C13.3309 10 15 8.56606 15 6H17C17 9.31371 14.7614 12 12 12Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledShoppingBag = styled.i` & { transform: scale(var(--ggs, 1)); } &, &::after { box-sizing: border-box; position: relative; display: block; width: 20px; height: 20px; border: 2px solid; border-radius: 3px; } &::after { content: ''; position: absolute; width: 10px; height: 6px; border-bottom-left-radius: 120px; border-bottom-right-radius: 120px; border-top: 0; top: 2px; left: 3px; }`export const ShoppingBag = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledShoppingBag {...props} ref={ref} icon-role="shopping-bag" /></> ) },)

CSSSVGTSX

1	.gg-shopping-bag {
2	transform: scale(var(--ggs,1))
3	}
4
5	.gg-shopping-bag,
6	.gg-shopping-bag::after {
7	box-sizing: border-box;
8	position: relative;
9	display: block;
10	width: 20px;
11	height: 20px;
12	border: 2px solid;
13	border-radius: 3px
14	}
15
16	.gg-shopping-bag::after {
17	content: "";
18	position: absolute;
19	width: 10px;
20	height: 6px;
21	border-bottom-left-radius: 120px;
22	border-bottom-right-radius: 120px;
23	border-top: 0;
24	top: 2px;
25	left: 3px
26	}

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="M5 4H19C19.5523 4 20 4.44771 20 5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5C4 4.44772 4.44771 4 5 4ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM12 12C9.23858 12 7 9.31371 7 6H9C9 8.56606 10.6691 10 12 10C13.3309 10 15 8.56606 15 6H17C17 9.31371 14.7614 12 12 12Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Shopping Bag is a wonderful pure CSS icon built by practicing attributes such as: transform, width, height, border, border-radius, border-top,
Some stats, it has: 26 Lines of code at 508b & 370b after compression. Quite amazing 😲 for a CSS designed icon.

Shopping Bag

Thank you!