woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-12 01:18:39 +08:00
Code Issues Projects Packages Wiki Activity Actions 5

♻️ Convert SVG logo to Icon component

Browse source
This commit is contained in:
Philipp Stracker 2025-01-10 13:15:11 +01:00
parent 9234975178
commit efa4ca1a43
No known key found for this signature in database
5 changed files with 18 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

8
modules/ppcp-settings/images/logo-paypal.svg
View file

@ -1,8 +0,0 @@
<svg width="110" height="38" viewBox="0 0 110 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_4177_18052" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="110" height="38">
<path d="M0.416626 0.68335H109.583V37.3167H0.416626V0.68335Z" fill="white"/>
</mask>
<g mask="url(#mask0_4177_18052)">
<path d="M109.583 0.68335V28.0417H103.358V0.68335H109.583ZM101.067 9.91668V28.0917H95.5333V26.525C94.8333 27.2083 94.0333 27.725 93.15 28.0917C92.2583 28.475 91.2916 28.675 90.2583 28.675C88.9583 28.675 87.75 28.4333 86.6416 27.95C85.5333 27.4417 84.5666 26.75 83.75 25.8833C82.925 25.0083 82.275 23.9917 81.7916 22.8333C81.3333 21.65 81.1083 20.375 81.1083 19.0167C81.1083 17.6583 81.3333 16.4 81.7916 15.2417C82.275 14.0583 82.925 13.025 83.75 12.15C84.5647 11.2817 85.5489 10.5896 86.6416 10.1167C87.75 9.60835 88.9583 9.35002 90.2583 9.35002C91.2916 9.35002 92.2583 9.54168 93.15 9.93335C94.0416 10.3 94.8416 10.8167 95.5333 11.5V9.93335H101.067V9.91668ZM91.2583 23.1417C92.3916 23.1417 93.3166 22.7583 94.0416 21.975C94.7916 21.2 95.1666 20.2083 95.1666 19C95.1666 17.7917 94.7916 16.7917 94.0416 16.025C93.3166 15.25 92.3833 14.8583 91.2583 14.8583C90.1333 14.8583 89.1833 15.2417 88.4333 16.025C87.7083 16.8 87.35 17.7917 87.35 19C87.35 20.2083 87.7166 21.2083 88.4333 21.975C89.1833 22.75 90.125 23.1417 91.2583 23.1417ZM72.225 0.68335C73.8666 0.68335 75.2666 0.916683 76.425 1.37502C77.5833 1.83335 78.5583 2.47502 79.3583 3.30002C80.175 4.15002 80.8166 5.11668 81.275 6.20835C81.7333 7.30002 81.9583 8.47502 81.9583 9.73335C81.9583 10.9917 81.7333 12.1667 81.275 13.2583C80.8251 14.3399 80.1748 15.3267 79.3583 16.1667C78.5666 16.9917 77.5833 17.6333 76.425 18.0917C75.2666 18.55 73.8666 18.7833 72.225 18.7833H69.225V28.0833H62.8916V0.68335H72.225ZM71.3166 13.15C72.1666 13.15 72.8083 13.0667 73.275 12.8917C73.7583 12.7 74.1583 12.45 74.4666 12.1667C75.1166 11.5583 75.4416 10.75 75.4416 9.73335C75.4416 8.71668 75.1166 7.90835 74.4666 7.30002C74.15 7.00835 73.7583 6.77502 73.275 6.60835C72.8166 6.41668 72.1666 6.31668 71.3166 6.31668H69.2166V13.15H71.3166ZM39.5583 9.91668H46.4333L51.1 18.6333H51.175L55.3333 9.91668H61.7L48.0583 37.3167H41.725L47.95 24.7833L39.5583 9.91668ZM38.3333 9.91668V28.0917H32.8V26.525C32.1 27.2083 31.3 27.725 30.4166 28.0917C29.525 28.475 28.5583 28.675 27.525 28.675C26.225 28.675 25.0166 28.4333 23.9083 27.95C22.8 27.4417 21.8333 26.75 21.0166 25.8833C20.2 25.0083 19.5416 23.9917 19.0583 22.8333C18.6 21.65 18.375 20.375 18.375 19.0167C18.375 17.6583 18.6 16.4 19.0583 15.2417C19.5416 14.0583 20.1916 13.025 21.0166 12.15C21.8298 11.2799 22.8144 10.5875 23.9083 10.1167C25.0166 9.60835 26.225 9.35002 27.525 9.35002C28.5583 9.35002 29.525 9.54168 30.4166 9.93335C31.3083 10.3 32.1083 10.8167 32.8 11.5V9.93335H38.3333V9.91668ZM28.525 23.1417C29.6583 23.1417 30.5833 22.7583 31.3166 21.975C32.0666 21.2 32.4416 20.2083 32.4416 19C32.4416 17.7917 32.0666 16.7917 31.3166 16.025C30.5916 15.25 29.6583 14.8583 28.525 14.8583C27.3916 14.8583 26.45 15.2417 25.7 16.025C24.975 16.8 24.6166 17.7917 24.6166 19C24.6166 20.2083 24.9833 21.2083 25.7 21.975C26.45 22.75 27.3916 23.1417 28.525 23.1417ZM9.74996 0.68335C11.3916 0.68335 12.7916 0.916683 13.95 1.37502C15.1083 1.83335 16.0833 2.47502 16.8833 3.30002C17.7 4.15002 18.3416 5.11668 18.8 6.20835C19.2583 7.30002 19.4833 8.47502 19.4833 9.73335C19.4833 10.9917 19.2583 12.1667 18.8 13.2583C18.3501 14.3399 17.6998 15.3267 16.8833 16.1667C16.0916 16.9917 15.1083 17.6333 13.95 18.0917C12.7916 18.55 11.3916 18.7833 9.74996 18.7833H6.74996V28.0833H0.416626V0.68335H9.74996ZM8.84996 13.15C9.69996 13.15 10.3416 13.0667 10.8083 12.8917C11.2916 12.7 11.6916 12.45 12 12.1667C12.65 11.5583 12.975 10.75 12.975 9.73335C12.975 8.71668 12.65 7.90835 12 7.30002C11.6833 7.00835 11.2916 6.77502 10.8083 6.60835C10.35 6.41668 9.69996 6.31668 8.84996 6.31668H6.74996V13.15H8.84996Z" fill="black"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.8 KiB

2
modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js
View file

@ -1,3 +1,5 @@
export { default as openSignup } from './Icons/open-signup';
export { default as logoPayPal } from './Icons/logo-paypal';
export const NOTIFICATION_SUCCESS = '✔️';
export const NOTIFICATION_ERROR = '❌';

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js Normal file
View file

@ -0,0 +1,12 @@
import { SVG, Path } from '@wordpress/primitives';
const logoPayPal = (
<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 38">
<Path
d="M109.583.683v27.359h-6.225V.683h6.225Zm-8.516 9.234v18.175h-5.534v-1.567c-.7.683-1.5 1.2-2.383 1.567a7.259 7.259 0 0 1-2.892.583c-1.3 0-2.508-.242-3.616-.725a9.216 9.216 0 0 1-2.892-2.067 10.021 10.021 0 0 1-1.958-3.05c-.459-1.183-.684-2.458-.684-3.816 0-1.359.225-2.617.684-3.775.483-1.184 1.133-2.217 1.958-3.092a8.708 8.708 0 0 1 2.892-2.033c1.108-.509 2.316-.767 3.616-.767 1.034 0 2 .192 2.892.583a7.312 7.312 0 0 1 2.383 1.567V9.933h5.534v-.016Zm-9.809 13.225c1.134 0 2.059-.384 2.784-1.167.75-.775 1.125-1.767 1.125-2.975 0-1.208-.375-2.208-1.125-2.975-.725-.775-1.659-1.167-2.784-1.167-1.125 0-2.075.384-2.825 1.167-.725.775-1.083 1.767-1.083 2.975 0 1.208.367 2.208 1.083 2.975.75.775 1.692 1.167 2.825 1.167ZM72.225.683c1.642 0 3.042.234 4.2.692 1.158.458 2.133 1.1 2.933 1.925a9.439 9.439 0 0 1 1.917 2.908c.458 1.092.683 2.267.683 3.525 0 1.259-.225 2.434-.683 3.525a9.293 9.293 0 0 1-1.917 2.909c-.791.825-1.775 1.466-2.933 1.925-1.158.458-2.558.691-4.2.691h-3v9.3h-6.333V.683h9.333Zm-.908 12.467c.85 0 1.491-.083 1.958-.258a3.853 3.853 0 0 0 1.192-.725c.65-.609.975-1.417.975-2.434 0-1.016-.325-1.825-.975-2.433a3.329 3.329 0 0 0-1.192-.692c-.458-.191-1.108-.291-1.958-.291h-2.1v6.833h2.1ZM39.558 9.917h6.875l4.667 8.716h.075l4.158-8.716H61.7l-13.642 27.4h-6.333l6.225-12.534-8.392-14.866Zm-1.225 0v18.175H32.8v-1.567c-.7.683-1.5 1.2-2.383 1.567a7.258 7.258 0 0 1-2.892.583c-1.3 0-2.508-.242-3.617-.725a9.218 9.218 0 0 1-2.891-2.067 10.18 10.18 0 0 1-1.959-3.05c-.458-1.183-.683-2.458-.683-3.816 0-1.359.225-2.617.683-3.775.484-1.184 1.134-2.217 1.959-3.092a8.626 8.626 0 0 1 2.891-2.033c1.109-.509 2.317-.767 3.617-.767 1.033 0 2 .192 2.892.583A7.312 7.312 0 0 1 32.8 11.5V9.933h5.533v-.016Zm-9.808 13.225c1.133 0 2.058-.384 2.792-1.167.75-.775 1.125-1.767 1.125-2.975 0-1.208-.375-2.208-1.125-2.975-.725-.775-1.659-1.167-2.792-1.167-1.133 0-2.075.384-2.825 1.167-.725.775-1.083 1.767-1.083 2.975 0 1.208.366 2.208 1.083 2.975.75.775 1.692 1.167 2.825 1.167ZM9.75.683c1.642 0 3.042.234 4.2.692 1.158.458 2.133 1.1 2.933 1.925A9.439 9.439 0 0 1 18.8 6.208c.458 1.092.683 2.267.683 3.525 0 1.259-.225 2.434-.683 3.525a9.293 9.293 0 0 1-1.917 2.909c-.791.825-1.775 1.466-2.933 1.925-1.158.458-2.558.691-4.2.691h-3v9.3H.417V.683H9.75Zm-.9 12.467c.85 0 1.492-.083 1.958-.258A3.855 3.855 0 0 0 12 12.167c.65-.609.975-1.417.975-2.434 0-1.016-.325-1.825-.975-2.433a3.33 3.33 0 0 0-1.192-.692c-.458-.191-1.108-.291-1.958-.291h-2.1v6.833h2.1Z"
fill="#000"
/>
</SVG>
);
export default logoPayPal;

3
modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js
View file

@ -1,6 +1,3 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';
const openSignup = (

6
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js
View file

@ -1,11 +1,13 @@
import data from '../../../../utils/data';
import { Icon } from '@wordpress/components';
import { logoPayPal } from '../../../ReusableComponents/Icons';
const OnboardingHeader = ( props ) => {
return (
<section className="ppcp-r-onboarding-header">
<div className="ppcp-r-onboarding-header__logo">
<div className="ppcp-r-onboarding-header__logo-wrapper">
{ data().getImage( 'logo-paypal.svg' ) }
<Icon icon={ logoPayPal } width="auto" height={ 38 } />
</div>
</div>
<div className="ppcp-r-onboarding-header__content">