@gravityforms/components/react/admin/elements/Svgs/MailgunLogo/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 MailgunLogo
 * @description The Mailgun logo.
 *
 * @since 2.3.1
 *
 * @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 MailgunLogo from '@gravityforms/components/react/admin/elements/Svgs/MailgunLogo';
 *
 * return (
 *    <MailgunLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const MailgunLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="4 3 92 92" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g filter="url(#filter0_d_3041_90651)">
				<rect width="92" height="92" x="4" y="3" fill="#F1F1F1" rx="46" />
				<path fill="#F06B66" fillRule="evenodd" d="M49.719 20c15.79 0 28.637 12.786 28.637 28.503 0 5.072-4.146 9.2-9.242 9.2a9.238 9.238 0 0 1-4.846-1.37l-.133-.082-.076.136a16.428 16.428 0 0 1-14.34 8.427c-9.037 0-16.388-7.317-16.388-16.31 0-8.994 7.351-16.311 16.388-16.311 9.036 0 16.387 7.317 16.387 16.31 0 1.651 1.35 2.994 3.008 2.994a3.004 3.004 0 0 0 3.007-2.993c0-12.296-10.05-22.298-22.402-22.298-12.353 0-22.403 10.002-22.403 22.297S37.366 70.8 49.72 70.8a22.41 22.41 0 0 0 17.066-7.852l4.775 3.99a28.64 28.64 0 0 1-21.841 10.068c-15.79 0-28.637-12.787-28.637-28.503C21.082 32.786 33.928 20 49.719 20Zm0 18.398c-5.599 0-10.153 4.533-10.153 10.105 0 5.573 4.554 10.106 10.153 10.106 5.598 0 10.152-4.533 10.152-10.105S55.317 38.398 49.72 38.398Zm0 6.022c2.262 0 4.102 1.832 4.102 4.084 0 2.25-1.84 4.083-4.102 4.083-2.262 0-4.103-1.832-4.103-4.083 0-2.252 1.84-4.084 4.103-4.084Z" clipRule="evenodd" />
			</g>
			<defs>
				<filter id="filter0_d_3041_90651" width="100" height="100" x="0" y="0" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
					<feFlood floodOpacity="0" result="BackgroundImageFix" />
					<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
					<feOffset dy="1" />
					<feGaussianBlur stdDeviation="2" />
					<feColorMatrix values="0 0 0 0 0.0687866 0 0 0 0 0.097585 0 0 0 0 0.37981 0 0 0 0.0779552 0" />
					<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3041_90651" />
					<feBlend in="SourceGraphic" in2="effect1_dropShadow_3041_90651" result="shape" />
				</filter>
			</defs>
		</svg>
	);
} );

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

MailgunLogo.displayName = 'Svgs/MailgunLogo';

export default MailgunLogo;