Circleci brands
1 .gg-circleci,
2 .gg-circleci::before { 3 display: block;
4 box-sizing: border-box;
5 border-radius: 18px 6 } 7 8 .gg-circleci { 9 position: relative;
10 transform: scale(var(--ggs,1 ));
11 width: 24px ;
12 height: 24px ;
13 border: 4px solid;
14 background:
15 linear-gradient( to left,
16 currentColor 8px ,transparent 0 )
17 no-repeat -2px center/8px 3px 18 } 19 20 .gg-circleci::before { 21 content: "";
22 position: absolute;
23 width: 10px ;
24 height: 10px ;
25 border: 3px solid;
26 top: 3px ;
27 right: 3px 28 }
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="M12 0 C5.37258 0 0 5.37258 0 12 C0 18.6274 5.37258 24 12 24 C18.6274 24 24 18.6274 24 12 C24 5.37258 18.6274 0 12 0 ZM4.14355 13.5165 C4.85219 17.2096 8.10023 20 12 20 C16.4183 20 20 16.4183 20 12 C20 7.58172 16.4183 4 12 4 C8.0886 4 4.83283 6.80704 4.13728 10.5165 L6.72824 10.5071 C7.37819 8.20738 9.49236 6.52222 12.0001 6.52222 C15.0254 6.52222 17.4779 8.9747 17.4779 12 C17.4779 15.0253 15.0254 17.4778 12.0001 17.4778 C9.49752 17.4778 7.3869 15.7995 6.73228 13.5071 L4.14355 13.5165 ZM9.52234 12 C9.52234 13.3684 10.6317 14.4778 12.0001 14.4778 C13.3685 14.4778 14.4779 13.3684 14.4779 12 C14.4779 10.6316 13.3685 9.52222 12.0001 9.52222 C10.6317 9.52222 9.52234 10.6316 9.52234 12 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCircleci = styled.i` 5 &, 6 &::before { 7 display: block;8 box-sizing: border-box;9 border-radius: 18px ;10 } 11 & { 12 position: relative;13 transform: scale(var(--ggs, 1 ));14 width: 24px ;15 height: 24px ;16 border: 4px solid;17 background: linear-gradient(to left, currentColor 8px , transparent 0 ) no-repeat -2px center/8px 3px ;18 } 19 &::before { 20 content: '';21 position: absolute;22 width: 10px ;23 height: 10px ;24 border: 3px solid;25 top: 3px ;26 right: 3px ;27 } 28 ` 29 30 export const Circleci = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledCircleci { ...props} ref={ ref} icon-role="circleci" /> 35 </> 36 ) 37 } , 38 ) 39
Circleci ended up a magic CSS icon built by adopting properties such as: .gg-circleci, border-radius, transform, width, height, border, background,
