Indie Hackers brands
1 .gg-indie-hackers { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 12px 8 } 9 10 .gg-indie-hackers::after ,
11 .gg-indie-hackers::before { 12 content: "";
13 position: absolute;
14 box-sizing: border-box;
15 display: block;
16 height: 12px 17 } 18 19 .gg-indie-hackers::before { 20 width: 3px ;
21 background: currentColor
22 } 23 24 .gg-indie-hackers::after { 25 width: 10px ;
26 right: 0 ;
27 border-left: 3px solid;
28 border-right: 3px solid;
29 background:
30 linear-gradient(to left,
31 currentColor 14px , transparent 0 )
32 no-repeat 0 center/14px 3px 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 d="M4 6 H7 V18 H4 V6 Z" fill="currentColor" /> 9 <path d="M10 6 H13 V10.5 H17 V6 H20 V18 H17 V13.5 H13 V18 H10 V6 Z" fill="currentColor" /> 10 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledIndieHackers = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 12px ;12 } 13 &::after , 14 &::before { 15 content: '';16 position: absolute;17 box-sizing: border-box;18 display: block;19 height: 12px ;20 } 21 &::before { 22 width: 3px ;23 background: currentColor;24 } 25 &::after { 26 width: 10px ;27 right: 0 ;28 border-left: 3px solid;29 border-right: 3px solid;30 background: linear-gradient(to left, currentColor 14px , transparent 0 ) no-repeat 0 center/14px 31 3px ; 32 } 33 ` 34 35 export const IndieHackers = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledIndieHackers { ...props} ref={ ref} icon-role="indie-hackers" /> 40 </> 41 ) 42 } , 43 ) 44
Indie Hackers ended up a magic CSS icon built by practicing attributes such as: transform, width, height, background, border-left, border-right,
