Bot
3K Views
64 Downloads - 43 API calls
39 Lines - 769 Bytes
Apr 23, 2020 interface devices
1 .gg-bot { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 21px ;
7 height: 10px ;
8 border-right: 8px solid transparent;
9 border-left: 8px solid transparent;
10 border-bottom: 1px solid transparent;
11 border-radius: 12px ;
12 box-shadow:
13 0 0 0 2px ,
14 -4px 0 0 -1px ,
15 4px 0 0 -1px ,
16 inset 0 -4px 0 -2px 17 } 18 19 .gg-bot::after ,
20 .gg-bot::before { 21 content: "";
22 display: block;
23 box-sizing: border-box;
24 position: absolute;
25 width: 2px ;
26 height: 2px ;
27 box-shadow: 0 0 0 2px ;
28 top: 3px 29 } 30 31 .gg-bot::before { 32 left: -4px ;
33 border-radius: 3px 34 } 35 36 .gg-bot::after { 37 border-radius: 100px ;
38 right: -4px 39 }
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 d="M14.1254 13 H10.1254 V15 H14.1254 V13 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M8.12537 13 C9.22994 13 10.1254 12.1046 10.1254 11 C10.1254 9.89543 9.22994 9 8.12537 9 C7.0208 9 6.12537 9.89543 6.12537 11 C6.12537 12.1046 7.0208 13 8.12537 13 ZM8.12537 11.5 C8.40151 11.5 8.62537 11.2761 8.62537 11 C8.62537 10.7239 8.40151 10.5 8.12537 10.5 C7.84922 10.5 7.62537 10.7239 7.62537 11 C7.62537 11.2761 7.84922 11.5 8.12537 11.5 Z" 13 fill="currentColor" 14 /> 15 <path 16 fill-rule="evenodd" 17 clip-rule="evenodd" 18 d="M18.1254 11 C18.1254 12.1046 17.2299 13 16.1254 13 C15.0208 13 14.1254 12.1046 14.1254 11 C14.1254 9.89543 15.0208 9 16.1254 9 C17.2299 9 18.1254 9.89543 18.1254 11 ZM16.6254 11 C16.6254 11.2761 16.4015 11.5 16.1254 11.5 C15.8492 11.5 15.6254 11.2761 15.6254 11 C15.6254 10.7239 15.8492 10.5 16.1254 10.5 C16.4015 10.5 16.6254 10.7239 16.6254 11 Z" 19 fill="currentColor" 20 /> 21 <path 22 fill-rule="evenodd" 23 clip-rule="evenodd" 24 d="M2.74884 14.6663 C3.73056 16.6421 5.76939 18 8.12537 18 H16.1254 C18.5654 18 20.6652 16.5435 21.6029 14.4525 C22.3722 13.9093 22.8746 13.0133 22.8746 12 C22.8746 10.9867 22.3722 10.0907 21.6029 9.54753 C20.6652 7.45651 18.5654 6 16.1254 6 H8.12537 C5.76939 6 3.73056 7.3579 2.74884 9.33375 C1.78448 9.83263 1.12537 10.8393 1.12537 12 C1.12537 13.1607 1.78448 14.1674 2.74884 14.6663 ZM8.12537 8 H16.1254 C17.5088 8 18.7282 8.70234 19.4465 9.76991 C19.7227 10.4593 19.8746 11.2119 19.8746 12 C19.8746 12.7881 19.7227 13.5407 19.4465 14.2301 C18.7282 15.2977 17.5088 16 16.1254 16 H8.12537 C5.91623 16 4.12537 14.2091 4.12537 12 C4.12537 9.79086 5.91623 8 8.12537 8 Z" 25 fill="currentColor" 26 /> 27 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBot = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 21px ;11 height: 10px ;12 border-right: 8px solid transparent;13 border-left: 8px solid transparent;14 border-bottom: 1px solid transparent;15 border-radius: 12px ;16 box-shadow: 0 0 0 2px , -4px 0 0 -1px , 4px 0 0 -1px , inset 0 -4px 0 -2px ;17 } 18 &::after , 19 &::before { 20 content: '';21 display: block;22 box-sizing: border-box;23 position: absolute;24 width: 2px ;25 height: 2px ;26 box-shadow: 0 0 0 2px ;27 top: 3px ;28 } 29 &::before { 30 left: -4px ;31 border-radius: 3px ;32 } 33 &::after { 34 border-radius: 100px ;35 right: -4px ;36 } 37 ` 38 39 export const Bot = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledBot { ...props} ref={ ref} icon-role="bot" /> 44 </> 45 ) 46 } , 47 ) 48
Bot developed into a wonderful CSS icon made by adopting attributes such as: transform, width, height, border-right, border-left, border-bottom, border-radius, box-shadow, Some stats, it has: 39 Lines of code at 769b & 543b after compiling. Truly stunning 🤩 for a icon designed by code.