Bee

Views Downloads - API calls 49 Lines - 994 Bytes Apr 23, 2020 interface

 .gg-bee,
.gg-bee::after,
.gg-bee::before {
 display: block;
 box-sizing: border-box;
 border: 2px solid
}

.gg-bee {
 position: relative;
 width: 12px;
 height: 20px;
 transform: scale(var(--ggs,1));
 border-radius: 22px;
 background:
 linear-gradient(
 to left,
 currentColor 12px,
 transparent 0
 ) no-repeat center 6px/12px 2px,
 linear-gradient(
 to left,
 currentColor 12px,
 transparent 0
 ) no-repeat center 10px/12px 2px;
 box-shadow: 0 4px 0 -2px,0 7px 0 -4px
}

.gg-bee::after,
.gg-bee::before {
 content: "";
 position: absolute;
 width: 6px;
 height: 10px;
 border-top: 0;
 border-bottom-left-radius: 22px;
 border-bottom-right-radius: 22px;
 top: 4px
}

.gg-bee::before {
 left: -6px;
 transform: rotate(40deg)
}

.gg-bee::after {
 right: -6px;
 transform: rotate(-40deg)
}

<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.9513 15.571C17.7695 17.2187 16.9205 18.6654 15.6805 19.635C15.332 20.4692 14.7092 21.1601 13.9247 21.5951C13.7025 22.4574 12.9196 23.0944 11.9879 23.0944C11.0562 23.0944 10.2733 22.4574 10.0511 21.5951C9.26672 21.1602 8.64392 20.4693 8.29547 19.6353C7.05955 18.6691 6.21203 17.229 6.02621 15.5883C4.93527 16.4161 3.37955 16.4118 2.28618 15.4944C1.01696 14.4294 0.851409 12.5371 1.91641 11.2679L6.00966 6.38975C6.27125 3.31753 8.84785 0.905579 11.9878 0.905579C15.1166 0.905579 17.6861 3.30046 17.9631 6.35711L22.0837 11.2679C23.1487 12.5371 22.9831 14.4294 21.7139 15.4944C20.613 16.4182 19.0433 16.4161 17.9513 15.571ZM15.6254 12.9056L13.9472 10.9056H10.0529L8.37467 12.9056H15.6254ZM17.9878 12.6095L19.0195 13.839C19.3745 14.2621 20.0053 14.3173 20.4283 13.9623C20.8514 13.6073 20.9066 12.9765 20.5516 12.5535L17.9878 9.49803V12.6095ZM15.9878 8.90558V6.90558C15.9878 4.69644 14.1969 2.90558 11.9878 2.90558C9.77865 2.90558 7.98779 4.69644 7.98779 6.90558V8.90558H15.9878ZM4.98059 13.839L5.98779 12.6387V9.52726L3.4485 12.5535C3.0935 12.9765 3.14869 13.6073 3.57176 13.9623C3.99483 14.3173 4.62559 14.2621 4.98059 13.839ZM11.9878 18.9056C9.77865 18.9056 7.98779 17.1147 7.98779 14.9056H15.9878C15.9878 17.1147 14.1969 18.9056 11.9878 18.9056Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledBee = styled.i` &, &::after, &::before { display: block; box-sizing: border-box; border: 2px solid; } & { position: relative; width: 12px; height: 20px; transform: scale(var(--ggs, 1)); border-radius: 22px; background: linear-gradient(to left, currentColor 12px, transparent 0) no-repeat center 6px/12px 2px, linear-gradient(to left, currentColor 12px, transparent 0) no-repeat center 10px/12px 2px; box-shadow: 0 4px 0 -2px, 0 7px 0 -4px; } &::after, &::before { content: ''; position: absolute; width: 6px; height: 10px; border-top: 0; border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; top: 4px; } &::before { left: -6px; transform: rotate(40deg); } &::after { right: -6px; transform: rotate(-40deg); }`export const Bee = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledBee {...props} ref={ref} icon-role="bee" /></> ) },)

CSSSVGTSX

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

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.9513 15.571C17.7695 17.2187 16.9205 18.6654 15.6805 19.635C15.332 20.4692 14.7092 21.1601 13.9247 21.5951C13.7025 22.4574 12.9196 23.0944 11.9879 23.0944C11.0562 23.0944 10.2733 22.4574 10.0511 21.5951C9.26672 21.1602 8.64392 20.4693 8.29547 19.6353C7.05955 18.6691 6.21203 17.229 6.02621 15.5883C4.93527 16.4161 3.37955 16.4118 2.28618 15.4944C1.01696 14.4294 0.851409 12.5371 1.91641 11.2679L6.00966 6.38975C6.27125 3.31753 8.84785 0.905579 11.9878 0.905579C15.1166 0.905579 17.6861 3.30046 17.9631 6.35711L22.0837 11.2679C23.1487 12.5371 22.9831 14.4294 21.7139 15.4944C20.613 16.4182 19.0433 16.4161 17.9513 15.571ZM15.6254 12.9056L13.9472 10.9056H10.0529L8.37467 12.9056H15.6254ZM17.9878 12.6095L19.0195 13.839C19.3745 14.2621 20.0053 14.3173 20.4283 13.9623C20.8514 13.6073 20.9066 12.9765 20.5516 12.5535L17.9878 9.49803V12.6095ZM15.9878 8.90558V6.90558C15.9878 4.69644 14.1969 2.90558 11.9878 2.90558C9.77865 2.90558 7.98779 4.69644 7.98779 6.90558V8.90558H15.9878ZM4.98059 13.839L5.98779 12.6387V9.52726L3.4485 12.5535C3.0935 12.9765 3.14869 13.6073 3.57176 13.9623C3.99483 14.3173 4.62559 14.2621 4.98059 13.839ZM11.9878 18.9056C9.77865 18.9056 7.98779 17.1147 7.98779 14.9056H15.9878C15.9878 17.1147 14.1969 18.9056 11.9878 18.9056Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Bee turned into a wonderful CSS icon built by using properties such as: .gg-bee, border, width, height, transform, border-radius, background, box-shadow, border-top,
Fun to know, it has: 49 Lines of code at 994b & 680b after compression. Quite stunning 🤩 huhh.

Bee

Thank you!