Git Pull code interface
1 .gg-git-pull { 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-pull::after ,
12 .gg-git-pull::before { 13 content: "";
14 display: block;
15 box-sizing: border-box;
16 position: absolute
17 } 18 19 .gg-git-pull::before { 20 border-right: 2px solid;
21 border-top: 2px solid;
22 border-top-right-radius: 4px ;
23 width: 8px ;
24 height: 6px ;
25 left: 0 ;
26 top: 2px 27 } 28 29 .gg-git-pull::after { 30 width: 4px ;
31 height: 4px ;
32 background: currentColor;
33 box-shadow:0 12px 0 0 ,6px 8px 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.34168 10.9143 5.66336 10.7633 5.9447 H11.3438 C13.5529 5.9447 15.3438 7.73556 15.3438 9.9447 V11.2244 C15.9301 11.5731 16.323 12.213 16.323 12.9447 C16.323 14.0493 15.4276 14.9447 14.323 14.9447 C13.2184 14.9447 12.323 14.0493 12.323 12.9447 C12.323 12.1959 12.7345 11.5432 13.3438 11.2004 V9.9447 C13.3438 8.84013 12.4483 7.9447 11.3438 7.9447 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 StyledGitPull = 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-top: 2px solid;24 border-top-right-radius: 4px ;25 width: 8px ;26 height: 6px ;27 left: 0 ;28 top: 2px ;29 } 30 &::after { 31 width: 4px ;32 height: 4px ;33 background: currentColor;34 box-shadow: 0 12px 0 0 , 6px 8px 0 0 ;35 border-radius: 100% ;36 left: -1px ;37 top: -1px ;38 } 39 ` 40 41 export const GitPull = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledGitPull { ...props} ref={ ref} icon-role="git-pull" /> 46 </> 47 ) 48 } , 49 ) 50
Git Pull developed into a magic 100% CSS icon made by adopting properties like: transform, width, height, background, border-top, box-shadow, border-radius,
