2020-04-29 10:57:58 +00:00
|
|
|
/**
|
|
|
|
* Get a class name for an icon.
|
|
|
|
*
|
|
|
|
* @param {string} id Icon ID.
|
|
|
|
*/
|
2021-08-20 11:55:30 +00:00
|
|
|
const getIconClassName = ( id: string ): string => {
|
2020-06-17 09:53:42 +00:00
|
|
|
return `wc-block-components-payment-method-icon wc-block-components-payment-method-icon--${ id }`;
|
2020-04-29 10:57:58 +00:00
|
|
|
};
|
|
|
|
|
2021-08-20 11:55:30 +00:00
|
|
|
interface PaymentMethodIconProps {
|
|
|
|
id: string;
|
|
|
|
src?: string | null;
|
|
|
|
alt?: string;
|
|
|
|
}
|
2020-04-29 10:57:58 +00:00
|
|
|
/**
|
|
|
|
* Return an element for an icon.
|
2020-09-20 23:54:08 +00:00
|
|
|
*
|
|
|
|
* @param {Object} props Incoming props for component.
|
|
|
|
* @param {string} props.id Id for component.
|
|
|
|
* @param {string|null} props.src Optional src value for icon.
|
|
|
|
* @param {string} props.alt Optional alt value for icon.
|
2020-04-29 10:57:58 +00:00
|
|
|
*/
|
2021-08-20 11:55:30 +00:00
|
|
|
const PaymentMethodIcon = ( {
|
|
|
|
id,
|
|
|
|
src = null,
|
|
|
|
alt = '',
|
|
|
|
}: PaymentMethodIconProps ): JSX.Element | null => {
|
2020-04-29 10:57:58 +00:00
|
|
|
if ( ! src ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return <img className={ getIconClassName( id ) } src={ src } alt={ alt } />;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default PaymentMethodIcon;
|