Shopping Cart

Views Downloads - API calls 50 Lines - 1255 Bytes Apr 23, 2020 shopping interface

 .gg-shopping-cart {
 display: block;
 box-sizing: border-box;
 position: relative;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 21px;
 background:
 linear-gradient(
 to left,currentColor 12px,
 transparent 0)
 no-repeat -1px 6px/18px 2px,
 linear-gradient(
 to left,currentColor 12px,
 transparent 0)
 no-repeat 6px 14px/11px 2px,
 linear-gradient(
 to left,currentColor 12px,
 transparent 0)
 no-repeat 0 2px/4px 2px,
 radial-gradient(
 circle,currentColor 60%,
 transparent 40%)
 no-repeat 12px 17px/4px 4px,
 radial-gradient(
 circle,currentColor 60%,
 transparent 40%)
 no-repeat 6px 17px/4px 4px
}

.gg-shopping-cart::after,
.gg-shopping-cart::before {
 content: "";
 display: block;
 position: absolute;
 box-sizing: border-box;
 width: 2px;
 height: 14px;
 background: currentColor;
 top: 2px;
 left: 4px;
 transform: skew(12deg)
}

.gg-shopping-cart::after {
 height: 10px;
 top: 6px;
 left: 16px;
 transform: skew(-12deg)
}

<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.79166 2H1V4H4.2184L6.9872 16.6776H7V17H20V16.7519L22.1932 7.09095L22.5308 6H6.6552L6.08485 3.38852L5.79166 2ZM19.9869 8H7.092L8.62081 15H18.3978L19.9869 8Z" fill="currentColor" /><path d="M10 22C11.1046 22 12 21.1046 12 20C12 18.8954 11.1046 18 10 18C8.89543 18 8 18.8954 8 20C8 21.1046 8.89543 22 10 22Z" fill="currentColor" /><path d="M19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledShoppingCart = styled.i` & { display: block; box-sizing: border-box; position: relative; transform: scale(var(--ggs, 1)); width: 20px; height: 21px; background: linear-gradient(to left, currentColor 12px, transparent 0) no-repeat -1px 6px/18px 2px, linear-gradient(to left, currentColor 12px, transparent 0) no-repeat 6px 14px/11px 2px, linear-gradient(to left, currentColor 12px, transparent 0) no-repeat 0 2px/4px 2px, radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat 12px 17px/4px 4px, radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat 6px 17px/4px 4px; } &::after, &::before { content: ''; display: block; position: absolute; box-sizing: border-box; width: 2px; height: 14px; background: currentColor; top: 2px; left: 4px; transform: skew(12deg); } &::after { height: 10px; top: 6px; left: 16px; transform: skew(-12deg); }`export const ShoppingCart = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledShoppingCart {...props} ref={ref} icon-role="shopping-cart" /></> ) },)

CSSSVGTSX

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

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.79166 2H1V4H4.2184L6.9872 16.6776H7V17H20V16.7519L22.1932 7.09095L22.5308 6H6.6552L6.08485 3.38852L5.79166 2ZM19.9869 8H7.092L8.62081 15H18.3978L19.9869 8Z"
12	fill="currentColor"
13	/>
14	<path
15	d="M10 22C11.1046 22 12 21.1046 12 20C12 18.8954 11.1046 18 10 18C8.89543 18 8 18.8954 8 20C8 21.1046 8.89543 22 10 22Z"
16	fill="currentColor"
17	/>
18	<path
19	d="M19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z"
20	fill="currentColor"
21	/>
22	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Shopping Cart turned into a wonderful 100% CSS icon made by using attributes like: transform, width, height, background,
Fun to know, it has: 50 Lines of code at 1255b & 830b minified. Truly amazing 😲 for a CSS designed icon.

Shopping Cart

Thank you!