Twitter brands
1 .gg-twitter { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 20px 8 } 9 10 .gg-twitter::after ,
11 .gg-twitter::before { 12 content: "";
13 display: block;
14 position: absolute;
15 box-sizing: border-box;
16 left: 4px 17 } 18 19 .gg-twitter::before { 20 width: 9px ;
21 height: 14px ;
22 border-left: 4px solid;
23 border-bottom: 4px solid;
24 border-bottom-left-radius: 6px ;
25 background:
26 linear-gradient(
27 to left,currentColor 12px ,transparent 0 )
28 no-repeat center 2px /10px 4px ;
29 top: 4px 30 } 31 32 .gg-twitter::after { 33 width: 4px ;
34 height: 4px ;
35 background: currentColor;
36 border-radius: 20px ;
37 top: 2px ;
38 box-shadow: 7px 4px 0 ,7px 12px 0 39 }
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="M8 3 C9.10457 3 10 3.89543 10 5 V8 H16 C17.1046 8 18 8.89543 18 10 C18 11.1046 17.1046 12 16 12 H10 V14 C10 15.6569 11.3431 17 13 17 H16 C17.1046 17 18 17.8954 18 19 C18 20.1046 17.1046 21 16 21 H13 C9.13401 21 6 17.866 6 14 V5 C6 3.89543 6.89543 3 8 3 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledTwitter = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 20px ;11 height: 20px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 position: absolute;18 box-sizing: border-box;19 left: 4px ;20 } 21 &::before { 22 width: 9px ;23 height: 14px ;24 border-left: 4px solid;25 border-bottom: 4px solid;26 border-bottom-left-radius: 6px ;27 background: linear-gradient(to left, currentColor 12px , transparent 0 ) no-repeat center 2px /10px 28 4px ; 29 top: 4px ;30 } 31 &::after { 32 width: 4px ;33 height: 4px ;34 background: currentColor;35 border-radius: 20px ;36 top: 2px ;37 box-shadow: 7px 4px 0 , 7px 12px 0 ;38 } 39 ` 40 41 export const Twitter = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledTwitter { ...props} ref={ ref} icon-role="twitter" /> 46 </> 47 ) 48 } , 49 ) 50
Twitter became a magic pure CSS icon made by using features such as: transform, width, height, border-left, border-bottom, background, border-radius, box-shadow,
