@gravityforms/components/react/admin/elements/Svgs/GoogleLogo/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 GoogleLogo
 * @description The Google 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 GoogleLogo from '@gravityforms/components/react/admin/elements/Svgs/GoogleLogo';
 *
 * return (
 *    <GoogleLogo height={ 44 } width={ 44 } />
 * );
 *
 */
const GoogleLogo = 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.042 92 92" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<g filter="url(#filter0_d_2944_85250)">
				<rect width="92" height="92" x="4" y="3.042" fill="#F1F1F1" rx="46" />
				<path fill="#4280EF" d="M77 50.774c0-1.895-.184-3.851-.49-5.685H50.041v10.82h15.16a12.754 12.754 0 0 1-5.624 8.497l9.047 7.03C73.944 66.484 77 59.27 77 50.774Z" />
				<path fill="#34A353" d="M50.046 78.16c7.58 0 13.937-2.506 18.583-6.785l-9.047-6.97c-2.506 1.713-5.746 2.69-9.536 2.69-7.336 0-13.51-4.951-15.772-11.553l-9.292 7.152C29.751 72.17 39.41 78.16 50.046 78.16Z" />
				<path fill="#F6B704" d="M34.272 55.481a17.047 17.047 0 0 1 0-10.759L24.98 37.51c-3.973 7.947-3.973 17.3 0 25.185l9.292-7.213Z" />
				<path fill="#E54335" d="M50.046 33.169a15.308 15.308 0 0 1 10.758 4.218l8.009-8.07c-5.074-4.768-11.799-7.335-18.767-7.274-10.637 0-20.295 5.99-25.064 15.466l9.292 7.213C36.536 38.06 42.71 33.17 50.046 33.17Z" />
			</g>
			<defs>
				<filter id="filter0_d_2944_85250" width="100" height="100" x="0" y=".042" 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_2944_85250" />
					<feBlend in="SourceGraphic" in2="effect1_dropShadow_2944_85250" result="shape" />
				</filter>
			</defs>
		</svg>
	);
} );

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

GoogleLogo.displayName = 'Svgs/GoogleLogo';

export default GoogleLogo;