@gravityforms/components/react/admin/elements/Svgs/MandrillLogo/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 MandrillLogo
 * @description The Mandrill 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 MandrillLogo from '@gravityforms/components/react/admin/elements/Svgs/MandrillLogo';
 *
 * return (
 *    <MandrillLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const MandrillLogo = forwardRef( ( {
	height = 44,
	title = '',
	width = 44,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="4 3 92 92" fill="none" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g filter="url(#filter0_d_3582_119643)">
				<rect width="92" height="92" x="4" y="3" fill="#F4F4F4" rx="46" />
				<g clipPath="url(#clip0_3582_119643)">
					<path fill="#1A1918" d="M49.593 50.64 32.817 26.036v21.119l9.58 14.059 7.18-10.555.016-.02Z" />
					<path fill="#ED9D4A" d="m49.593 50.64 7.225 10.597 9.518-13.905V26.037L49.593 50.64" />
					<path fill="#BB7731" d="m49.577 50.66-7.18 10.555L49.6 71.783l7.217-10.546-7.225-10.597-.016.02" />
					<path fill="#4CB2D4" d="M20.904 71.811h11.913V47.156L20.904 29.682v42.129Z" />
					<path fill="#1B82AD" d="M20.904 26.037v3.646l11.913 17.473V26.037H20.904Z" />
					<path fill="#C02439" d="M66.336 47.332v24.479h11.91V29.936l-11.91 17.396Z" />
					<path fill="#8F202F" d="M78.246 26.037h-11.91v21.295l11.91-17.396v-3.899" />
				</g>
			</g>
			<defs>
				<clipPath id="clip0_3582_119643">
					<path fill="#fff" d="M20 26h59v46H20z" />
				</clipPath>
				<filter id="filter0_d_3582_119643" 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_3582_119643" />
					<feBlend in="SourceGraphic" in2="effect1_dropShadow_3582_119643" result="shape" />
				</filter>
			</defs>
		</svg>
	);
} );

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

MandrillLogo.displayName = 'Svgs/MandrillLogo';

export default MandrillLogo;