@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
59 lines (53 loc) • 2.39 kB
JavaScript
import { React, PropTypes } from '@gravityforms/libraries';
const { forwardRef } = React;
/**
* @module MailerSendLogo
* @description The MailerSend logo.
*
* @since 5.4.2
*
* @param {object} props Component props.
* @param {number} props.height The height of the logo.
* @param {string} props.title The title of the logo.
* @param {number} props.width The width of the logo.
* @param {object|null} ref Ref to the component.
*
* @return {JSX.Element} The svg component.
* @example
* import MailerSendLogo from '@gravityforms/components/react/admin/elements/Svgs/MailerSendLogo';
*
* return (
* <MailerSendLogo height={ 44 } width={ 44 } />
* );
*
*/
const MailerSendLogo = forwardRef( ( {
height = 44,
title = '',
width = 44,
}, ref ) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 92 92" fill="none" ref={ ref }>
{ title !== '' && <title>{ title }</title> }
<rect width="92" height="92" fill="#F1F1F1" rx="46" />
<g clipPath="url(#mailer-send-logo-clip-path)">
<path fill="#4E48E0" d="M68.34 37.927a.953.953 0 0 0-.79-.401H50.124l8.689-13.888a1.124 1.124 0 0 0-.035-1.237.964.964 0 0 0-.799-.401H42.976c-1.506 0-2.914.808-3.758 2.156L22.166 51.414c-.223.357-.232.845.037 1.236a.952.952 0 0 0 .792.401H40.41l-8.69 13.892c-.156.25-.204.566-.133.866.11.466.522.772.967.772h14.995c1.518 0 2.936-.815 3.786-2.173l8.353-13.357 8.689-13.888a1.13 1.13 0 0 0-.036-1.236Z" />
<path fill="#4E48E0" d="m59.69 53.048-8.355 13.36c-.85 1.358-2.268 2.172-3.786 2.172H32.554a.997.997 0 0 1-.967-.77c-.071-.301-.023-.617.133-.867l8.691-13.895h19.28Z" />
<path fill="#1C81C1" d="M50.114 37.526h17.435c.306 0 .61.136.792.401.269.391.259.88.036 1.236l-8.688 13.889H40.403l9.71-15.526Z" />
<path fill="#5CC4CD" d="M22.994 53.051a.952.952 0 0 1-.791-.4 1.13 1.13 0 0 1-.036-1.237l17.051-27.258C40.063 22.808 41.47 22 42.977 22H57.98c.308 0 .614.136.799.401.27.392.258.88.035 1.237L40.411 53.05H22.994Z" />
</g>
<defs>
<clipPath id="mailer-send-logo-clip-path">
<path fill="#fff" d="M22 22h47v47H22z" />
</clipPath>
</defs>
</svg>
);
} );
MailerSendLogo.propTypes = {
height: PropTypes.number,
title: PropTypes.string,
width: PropTypes.number,
};
MailerSendLogo.displayName = 'Svgs/MailerSendLogo';
export default MailerSendLogo;