Paypal brands
1 .gg-paypal { 2 position: relative;
3 box-sizing: border-box;
4 display: block;
5 width: 16px ;
6 height: 18px ;
7 transform:
8 skew(-10deg )
9 scale(var(--ggs,1 ));
10 background:
11 linear-gradient(
12 to left,
13 currentColor 20px ,transparent 0 )
14 no-repeat 3px bottom/4px 2px ,
15 linear-gradient(
16 to left,
17 currentColor 20px ,transparent 0 )
18 no-repeat 5px bottom/3px 10px 19 } 20 21 .gg-paypal::after ,
22 .gg-paypal::before { 23 content: "";
24 box-sizing: border-box;
25 display: block;
26 position: absolute;
27 border: 2px solid
28 } 29 30 .gg-paypal::before { 31 width: 8px ;
32 height: 10px ;
33 border-top-right-radius: 10px ;
34 border-bottom-right-radius: 10px ;
35 border-left: 0 ;
36 left: 5px ;
37 box-shadow: 2px 2px 0 38 } 39 40 .gg-paypal::after { 41 width: 6px ;
42 height: 16px ;
43 border-right: 0 44 }
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="M6.47005 3.54443 H14.4701 C16.1089 3.54443 17.4146 4.31866 18.0963 5.51496 C19.3165 6.38743 19.9427 7.91487 19.6082 9.65332 C19.0865 12.365 16.425 14.5633 13.6636 14.5633 H11.6636 L10.5301 20.4553 H6.39824 L6.62891 19.2563 H3.44727 L6.47005 3.54443 ZM8.0922 5.50842 H14.0922 C15.7491 5.50842 16.8385 6.82737 16.5254 8.45439 C16.2124 10.0814 14.6155 11.4004 12.9587 11.4004 H8.95866 L7.82511 17.2923 H5.82511 L8.0922 5.50842 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPaypal = styled.i` 5 & { 6 position: relative;7 box-sizing: border-box;8 display: block;9 width: 16px ;10 height: 18px ;11 transform: skew(-10deg ) scale(var(--ggs, 1 ));12 background: linear-gradient(to left, currentColor 20px , transparent 0 ) no-repeat 3px bottom/4px 13 2px , 14 linear-gradient(to left, currentColor 20px , transparent 0 ) no-repeat 5px bottom/3px 10px ; 15 } 16 &::after , 17 &::before { 18 content: '';19 box-sizing: border-box;20 display: block;21 position: absolute;22 border: 2px solid;23 } 24 &::before { 25 width: 8px ;26 height: 10px ;27 border-top-right-radius: 10px ;28 border-bottom-right-radius: 10px ;29 border-left: 0 ;30 left: 5px ;31 box-shadow: 2px 2px 0 ;32 } 33 &::after { 34 width: 6px ;35 height: 16px ;36 border-right: 0 ;37 } 38 ` 39 40 export const Paypal = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledPaypal { ...props} ref={ ref} icon-role="paypal" /> 45 </> 46 ) 47 } , 48 ) 49
Paypal became a CSS icon made by using properties as follows: width, height, transform, background, border, border-left, box-shadow, border-right,
