Git Branch code interface
1 .gg-git-branch { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 2px ;
7 height: 14px ;
8 background: currentColor
9 } 10 11 .gg-git-branch::after ,
12 .gg-git-branch::before { 13 content: "";
14 display: block;
15 box-sizing: border-box;
16 position: absolute
17 } 18 19 .gg-git-branch::before { 20 border-right: 2px solid;
21 border-bottom: 2px solid;
22 border-bottom-right-radius: 4px ;
23 bottom: 0 ;
24 width: 8px ;
25 height: 6px ;
26 left: 0 27 } 28 29 .gg-git-branch::after { 30 width: 4px ;
31 height: 4px ;
32 background: currentColor;
33 box-shadow:
34 0 12px 0 0 ,
35 6px 6px 0 0 ;
36 border-radius: 100% ;
37 left: -1px ;
38 top: -1px 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 9 d="M9 3 C7.89543 3 7 3.89543 7 5 C7 5.74028 7.4022 6.38663 8 6.73244 V17.2676 C7.4022 17.6134 7 18.2597 7 19 C7 20.1046 7.89543 21 9 21 C9.74028 21 10.3866 20.5978 10.7324 20 H11.9585 C14.1676 20 15.9585 18.2091 15.9585 16 V14.7324 C16.5563 14.3866 16.9585 13.7403 16.9585 13 C16.9585 11.8954 16.0631 11 14.9585 11 C13.8539 11 12.9585 11.8954 12.9585 13 C12.9585 13.7403 13.3607 14.3866 13.9585 14.7324 V16 C13.9585 17.1046 13.0631 18 11.9585 18 H10.7324 C10.5568 17.6964 10.3036 17.4432 10 17.2676 V6.73244 C10.5978 6.38663 11 5.74028 11 5 C11 3.89543 10.1046 3 9 3 Z" 10 fill="currentColor" 11 /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGitBranch = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 2px ;11 height: 14px ;12 background: currentColor;13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 } 21 &::before { 22 border-right: 2px solid;23 border-bottom: 2px solid;24 border-bottom-right-radius: 4px ;25 bottom: 0 ;26 width: 8px ;27 height: 6px ;28 left: 0 ;29 } 30 &::after { 31 width: 4px ;32 height: 4px ;33 background: currentColor;34 box-shadow: 0 12px 0 0 , 6px 6px 0 0 ;35 border-radius: 100% ;36 left: -1px ;37 top: -1px ;38 } 39 ` 40 41 export const GitBranch = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledGitBranch { ...props} ref={ ref} icon-role="git-branch" /> 46 </> 47 ) 48 } , 49 ) 50
Git Branch turned into a wonderful CSS icon built by practicing attributes like: transform, width, height, background, border-bottom, box-shadow, border-radius,
