Gitter brands
1 .gg-gitter { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 18px ;
8 border-left: 4px solid transparent;
9 border-right: 4px solid transparent;
10 box-shadow: inset 2px 0 0 ,inset -2px 0 0 11 } 12 13 .gg-gitter::after ,
14 .gg-gitter::before { 15 content: "";
16 position: absolute;
17 box-sizing: border-box;
18 display: block;
19 width: 2px ;
20 background: currentColor
21 } 22 23 .gg-gitter::before { 24 height: 13px ;
25 top: -3px ;
26 left: -4px 27 } 28 29 .gg-gitter::after { 30 height: 10px ;
31 left: 8px 32 }
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="M5 1.5 H7 V14.5 H5 V1.5 Z" fill="currentColor" /> 9 <path d="M9 4.5 H11 V22.5 H9 V4.5 Z" fill="currentColor" /> 10 <path d="M15 4.5 H13 V22.5 H15 V4.5 Z" fill="currentColor" /> 11 <path d="M17 4.5 H19 V14.5 H17 V4.5 Z" fill="currentColor" /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGitter = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 18px ;12 border-left: 4px solid transparent;13 border-right: 4px solid transparent;14 box-shadow: inset 2px 0 0 , inset -2px 0 0 ;15 } 16 &::after , 17 &::before { 18 content: '';19 position: absolute;20 box-sizing: border-box;21 display: block;22 width: 2px ;23 background: currentColor;24 } 25 &::before { 26 height: 13px ;27 top: -3px ;28 left: -4px ;29 } 30 &::after { 31 height: 10px ;32 left: 8px ;33 } 34 ` 35 36 export const Gitter = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledGitter { ...props} ref={ ref} icon-role="gitter" /> 41 </> 42 ) 43 } , 44 ) 45
Gitter developed into a 100% CSS icon created by practicing attributes as follows: transform, width, height, border-left, border-right, box-shadow, background,
