Gift

Views 70 Downloads - 7 API calls 51 Lines - 1148 Bytes Apr 23, 2020 design

 .gg-gift {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 22px;
 height: 14px;
 margin-top: 8px;
 border: 2px solid transparent;
 box-shadow:
 inset 2px 0 0,
 inset -2px 0 0,
 0 -2px 0,
 inset 0 2px 0,
 inset 0 -2px 0;
 background:
 linear-gradient(to left,
 currentColor 10px,transparent 0),
 linear-gradient(to left,
 currentColor 10px,transparent 0),
 linear-gradient(to left,
 currentColor 10px,transparent 0);
 background-repeat: no-repeat;
 background-size:
 2px 10px,2px 10px,2px 10px;
 background-position:
 8px 0,18px -8px,-2px -8px
}

.gg-gift::after,
.gg-gift::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 border-radius: 3px;
 width: 6px;
 height: 8px;
 border: 2px solid;
 top: -10px
}

.gg-gift::after {
 left: 3px;
 transform: rotate(-45deg)
}

.gg-gift::before {
 right: 3px;
 transform: rotate(45deg)
}

<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.5354 2.87868C16.3638 1.70711 14.4644 1.70711 13.2928 2.87868L11.8786 4.29289C11.8183 4.35317 11.7611 4.41538 11.707 4.47931C11.653 4.41539 11.5958 4.3532 11.5355 4.29293L10.1213 2.87871C8.94975 1.70714 7.05025 1.70714 5.87868 2.87871C4.70711 4.05029 4.70711 5.94978 5.87868 7.12136L6.75732 8H1V14H3V22H21V14H23V8H16.6567L17.5354 7.12132C18.707 5.94975 18.707 4.05025 17.5354 2.87868ZM14.707 7.12132L16.1212 5.70711C16.5117 5.31658 16.5117 4.68342 16.1212 4.29289C15.7307 3.90237 15.0975 3.90237 14.707 4.29289L13.2928 5.70711C12.9023 6.09763 12.9023 6.7308 13.2928 7.12132C13.6833 7.51184 14.3165 7.51184 14.707 7.12132ZM10.1213 5.70714L8.70711 4.29293C8.31658 3.9024 7.68342 3.9024 7.29289 4.29293C6.90237 4.68345 6.90237 5.31662 7.29289 5.70714L8.70711 7.12136C9.09763 7.51188 9.7308 7.51188 10.1213 7.12136C10.5118 6.73083 10.5118 6.09767 10.1213 5.70714ZM21 10V12H3V10H21ZM12.9167 14H19V20H12.9167V14ZM11.0834 14V20H5V14H11.0834Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledGift = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 22px; height: 14px; margin-top: 8px; border: 2px solid transparent; box-shadow: inset 2px 0 0, inset -2px 0 0, 0 -2px 0, inset 0 2px 0, inset 0 -2px 0; background: linear-gradient(to left, currentColor 10px, transparent 0), linear-gradient(to left, currentColor 10px, transparent 0), linear-gradient(to left, currentColor 10px, transparent 0); background-repeat: no-repeat; background-size: 2px 10px, 2px 10px, 2px 10px; background-position: 8px 0, 18px -8px, -2px -8px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; border-radius: 3px; width: 6px; height: 8px; border: 2px solid; top: -10px; } &::after { left: 3px; transform: rotate(-45deg); } &::before { right: 3px; transform: rotate(45deg); }`export const Gift = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledGift {...props} ref={ref} icon-role="gift" /></> ) },)

CSSSVGTSX

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

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.5354 2.87868C16.3638 1.70711 14.4644 1.70711 13.2928 2.87868L11.8786 4.29289C11.8183 4.35317 11.7611 4.41538 11.707 4.47931C11.653 4.41539 11.5958 4.3532 11.5355 4.29293L10.1213 2.87871C8.94975 1.70714 7.05025 1.70714 5.87868 2.87871C4.70711 4.05029 4.70711 5.94978 5.87868 7.12136L6.75732 8H1V14H3V22H21V14H23V8H16.6567L17.5354 7.12132C18.707 5.94975 18.707 4.05025 17.5354 2.87868ZM14.707 7.12132L16.1212 5.70711C16.5117 5.31658 16.5117 4.68342 16.1212 4.29289C15.7307 3.90237 15.0975 3.90237 14.707 4.29289L13.2928 5.70711C12.9023 6.09763 12.9023 6.7308 13.2928 7.12132C13.6833 7.51184 14.3165 7.51184 14.707 7.12132ZM10.1213 5.70714L8.70711 4.29293C8.31658 3.9024 7.68342 3.9024 7.29289 4.29293C6.90237 4.68345 6.90237 5.31662 7.29289 5.70714L8.70711 7.12136C9.09763 7.51188 9.7308 7.51188 10.1213 7.12136C10.5118 6.73083 10.5118 6.09767 10.1213 5.70714ZM21 10V12H3V10H21ZM12.9167 14H19V20H12.9167V14ZM11.0834 14V20H5V14H11.0834Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Gift developed into an amazing 100% CSS icon built by adopting features such as: transform, width, height, border, box-shadow, background, background-repeat, background-size, background- border-radius,
Some stats, it has: 51 Lines of code at 1148b & 802b after compression. Pretty marvelous 💎 for a CSS designed icon.

Gift

Thank you!