@gravityforms/components/react/admin/elements/Svgs/MailjetLogo/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, PropTypes } from '@gravityforms/libraries';

const { forwardRef } = React;

/**
 * @module MailjetLogo
 * @description The Mailjet logo.
 *
 * @since 5.4.6
 *
 * @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 MailjetLogo from '@gravityforms/components/react/admin/elements/Svgs/MailjetLogo';
 *
 * return (
 *    <MailjetLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const MailjetLogo = 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="#857AEB" rx={ 46 } />
			<path
				fill="#fff"
				d="M70.355 21.65a5 5 0 0 0-5.406-1.11L23.33 37.186c-1.856.746-3.064 2.446-3.145 4.447a4.958 4.958 0 0 0 2.764 4.689l12.321 6.157L39.751 48l-12.119-6.06 37.38-14.952-14.952 37.38L44 52.248l-4.48 4.481 6.158 12.322a4.95 4.95 0 0 0 4.47 2.77h.219c2-.082 3.7-1.29 4.446-3.146L71.46 27.05a5.004 5.004 0 0 0-1.11-5.406l.006.006Z"
			/>
		</svg>
	);
} );

MailjetLogo.propTypes = {
	height: PropTypes.number,
	title: PropTypes.string,
	width: PropTypes.number,
};

MailjetLogo.displayName = 'Svgs/MailjetLogo';

export default MailjetLogo;