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