@gravityforms/components/react/admin/elements/Svgs/SMTPLogo/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 SMTPLogo
 * @description The SMTP logo.
 *
 * @since 6.5.0
 *
 * @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 SMTPLogo from '@gravityforms/components/react/admin/elements/Svgs/SMTPLogo';
 *
 * return (
 *    <SMTPLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const SMTPLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 44 44" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path d="M22,0h0c12.15,0,22,9.85,22,22h0c0,12.15-9.85,22-22,22h0C9.85,44,0,34.15,0,22h0C0,9.85,9.85,0,22,0Z" fill="#F1F1F1" />
			<g shapeRendering="geometricPrecision">
				<path d="M9.32,12.02v18.9h25.36V12.02H9.32Z" fill="#fff" />
				<path d="M9.32,12.02v18.9h25.36V12.02H9.32ZM33.98,13.16l-.04,17.05-12.7-.04,6.86-5.05.04-.13-.4-.53-7.78,5.76-9.1-.04,22.99-17.01h.13ZM10.11,13.11l11.34,8.31-11.3,8.35-.09-.04.04-16.61ZM10.81,12.76l.04-.09,22.37.04-11.16,8.26-11.25-8.22Z" fill="#231f20" fillRule="evenodd" />
				<path d="M10.9,12.76l11.12,8.13h.09l10.99-8.13H10.9Z" fill="#18bc9c" />
			</g>
		</svg>
	);
} );

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

SMTPLogo.displayName = 'Svgs/SMTPLogo';

export default SMTPLogo;