Bitbucket interface
1 .gg-bitbucket { 2 position: relative;
3 box-sizing: border-box;
4 display: block;
5 width: 15px ;
6 height: 15px ;
7 transform: scale(var(--ggs,1 ));
8 border-top: 5px solid;
9 background:
10 linear-gradient(
11 to left,
12 currentColor 10px ,transparent 0 )
13 no-repeat center bottom/10px 5px 14 } 15 16 .gg-bitbucket::after ,
17 .gg-bitbucket::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 background: currentColor;
23 width: 5px ;
24 height: 15px ;
25 top: -5px ;
26 transform: skew(10deg );
27 border-radius: 1px 28 } 29 30 .gg-bitbucket::after { 31 right: 0 ;
32 transform: skew(-10deg )
33 }
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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M4.5831 4.63507 C4.03082 4.63507 3.66768 5.07472 3.77202 5.61706 L6.22804 18.383 C6.33238 18.9253 6.86468 19.3649 7.41696 19.3649 H16.583 C17.1353 19.3649 17.6676 18.9253 17.7719 18.383 L20.2279 5.61706 C20.3323 5.07472 19.9691 4.63507 19.4168 4.63507 H4.5831 ZM13.5449 14.3649 L14.4549 9.63507 H9.54504 L10.455 14.3649 H13.5449 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBitbucket = styled.i` 5 & { 6 position: relative;7 box-sizing: border-box;8 display: block;9 width: 15px ;10 height: 15px ;11 transform: scale(var(--ggs, 1 ));12 border-top: 5px solid;13 background: linear-gradient(to left, currentColor 10px , transparent 0 ) no-repeat center14 bottom/10px 5px ; 15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 background: currentColor;23 width: 5px ;24 height: 15px ;25 top: -5px ;26 transform: skew(10deg );27 border-radius: 1px ;28 } 29 &::after { 30 right: 0 ;31 transform: skew(-10deg );32 } 33 ` 34 35 export const Bitbucket = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledBitbucket { ...props} ref={ ref} icon-role="bitbucket" /> 40 </> 41 ) 42 } , 43 ) 44
Bitbucket became an amazing CSS icon made by adopting features as follows: width, height, transform, border-top, background, border-radius,
