Git Fork code interface
1 .gg-git-fork { 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-fork::after ,
12 .gg-git-fork::before { 13 content: "";
14 display: block;
15 box-sizing: border-box;
16 position: absolute
17 } 18 19 .gg-git-fork::before { 20 border-right: 2px solid;
21 border-bottom: 2px solid;
22 border-bottom-right-radius: 4px ;
23 bottom: 4px ;
24 width: 8px ;
25 height: 6px ;
26 left: 0 27 } 28 29 .gg-git-fork::after { 30 width: 4px ;
31 height: 4px ;
32 background: currentColor;
33 box-shadow:0 12px 0 0 ,6px 2px 0 0 ;
34 border-radius: 100% ;
35 left: -1px ;
36 top: -1px 37 }
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="M7 5 C7 3.89543 7.89543 3 9 3 C10.1046 3 11 3.89543 11 5 C11 5.74028 10.5978 6.38663 10 6.73244 V14.0396 H11.7915 C12.8961 14.0396 13.7915 13.1441 13.7915 12.0396 V10.7838 C13.1823 10.4411 12.7708 9.78837 12.7708 9.03955 C12.7708 7.93498 13.6662 7.03955 14.7708 7.03955 C15.8753 7.03955 16.7708 7.93498 16.7708 9.03955 C16.7708 9.77123 16.3778 10.4111 15.7915 10.7598 V12.0396 C15.7915 14.2487 14.0006 16.0396 11.7915 16.0396 H10 V17.2676 C10.5978 17.6134 11 18.2597 11 19 C11 20.1046 10.1046 21 9 21 C7.89543 21 7 20.1046 7 19 C7 18.2597 7.4022 17.6134 8 17.2676 V6.73244 C7.4022 6.38663 7 5.74028 7 5 Z" 10 fill="currentColor" 11 /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGitFork = 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: 4px ;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 2px 0 0 ;35 border-radius: 100% ;36 left: -1px ;37 top: -1px ;38 } 39 ` 40 41 export const GitFork = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledGitFork { ...props} ref={ ref} icon-role="git-fork" /> 46 </> 47 ) 48 } , 49 ) 50
Git Fork became a magic CSS icon built by using features as follows: transform, width, height, background, border-bottom, box-shadow, border-radius,
