Serverless brands
1 .gg-serverless { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 15px ;
7 height: 13px ;
8 overflow: hidden
9 } 10 11 .gg-serverless::after ,
12 .gg-serverless::before { 13 background: currentColor;
14 content: "";
15 box-sizing: border-box;
16 position: absolute;
17 display: block;
18 height: 3px ;
19 box-shadow: 0 5px 0 ,0 10px 0 ;
20 transform: skew(-20deg )
21 } 22 23 .gg-serverless::before { 24 width: 8px ;
25 left: -2px 26 } 27 28 .gg-serverless::after { 29 width: 12px ;
30 right: -5px 31 }
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="M11.7872 6 H5 V9 H10.6953 L11.7872 6 Z" fill="currentColor" /> 9 <path d="M9.96735 11 H5 V14 H8.87544 L9.96735 11 Z" fill="currentColor" /> 10 <path d="M11.0038 14 L12.0957 11 H20 V14 H11.0038 Z" fill="currentColor" /> 11 <path d="M8.1475 16 H5 V19 H7.05559 L8.1475 16 Z" fill="currentColor" /> 12 <path d="M9.18394 19 L10.2759 16 H20 V19 H9.18394 Z" fill="currentColor" /> 13 <path d="M12.8236 9 L13.9156 6 H20 V9 H12.8236 Z" fill="currentColor" /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledServerless = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 15px ;11 height: 13px ;12 overflow: hidden;13 } 14 &::after , 15 &::before { 16 background: currentColor;17 content: '';18 box-sizing: border-box;19 position: absolute;20 display: block;21 height: 3px ;22 box-shadow: 0 5px 0 , 0 10px 0 ;23 transform: skew(-20deg );24 } 25 &::before { 26 width: 8px ;27 left: -2px ;28 } 29 &::after { 30 width: 12px ;31 right: -5px ;32 } 33 ` 34 35 export const Serverless = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledServerless { ...props} ref={ ref} icon-role="serverless" /> 40 </> 41 ) 42 } , 43 ) 44
Serverless developed into an amazing 100% CSS icon made by using attributes such as: transform, width, height, overflow, content, box-shadow,
